<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>伪等高布局</title>

        <style type="text/css">

            *{

                margin:;

                padding:;

            }

            #wrap{

                width:750px;

                border: 1px solid;

                margin:  auto;

                overflow: hidden;

            }

            #wrap .left{

                float: left;

                width: 200px;

                background: pink;

              padding-bottom: 1000px;

                margin-bottom:-1000px;

            }

            #wrap .right{

                float: left;

                width: 500px;

                background: deeppink;

                padding-bottom: 1000px;

                margin-bottom:-1000px;

            }

            clearfix{

                *zoom: ;

            }

           clearfix:after{

               content:"";

               display: block;

               clear:both;

           }

        </style>

    </head>

    <body>

                <div id="wrap" class="clearfix">

            <div class="left">

                无限高度 <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

                left <br />

            </div>

            <div class="right">

                无限宽度<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

                right<br />

            </div>

        </div>

    </body>

</html>

    </body>

</html>

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>伪等高布局</title><style type="text/css">*{margin:0;padding:0;}#wrap{width:750px;border: 1px solid;margin: 0 auto;overflow: hidden;}#wrap .left{float: left;width: 200px;background: pink;  padding-bottom: 1000px;margin-bottom:-1000px;}#wrap .right{float: left;width: 500px;background: deeppink;padding-bottom: 1000px;margin-bottom:-1000px;}clearfix{*zoom: 1;}           clearfix:after{           content:"";           display: block;           clear:both;           }</style></head><body><div id="wrap" class="clearfix"><div class="left">无限高度 <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br /></div><div class="right">无限宽度<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /></div></div></body></html></body></html>

html--伪等高布局的更多相关文章

  1. CSS等高布局的6种方式

    × 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...

  2. div两栏等高布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. CSS等高布局的7种方式

    前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...

  4. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  5. css圣杯布局、等高布局

    所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...

  6. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  7. 模拟表格 inline-block等高布局

    表格是个好东西,它可以自动根据内容来调整格子,确保数据正常显示,并且不破坏表格的结构.但也有一些劣势,因为是用大量标签堆砌而成,页面结构会比较乱,细节也往往不容易控制.所以我们希望有表格的展示效果,但 ...

  8. margin 等高布局

    <div id="main"> <div id="left"> 我是左边的内容的啦啦啦啦... .<br> 我是左边的内容的 ...

  9. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

随机推荐

  1. error C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead.【转载】

    文章出处https://blog.csdn.net/qq_38721302/article/details/82850292 今天编写C++程序在使用头文件#include<cstring> ...

  2. Always On主辅延迟相关描述

    延迟是AlwaysOn最大的敌人之一 延迟是AlwaysON的最大敌人之一.对AlwaysON而言,其首要目标就尽量减少(无法避免)主副本.辅助副本的数据延迟,实现主副本.辅助副本的“数据同步”.只有 ...

  3. CSS3：CSS3 文本效果

    ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...

  4. hive简述

    显示表头,当前终端有效 set hive.cli.print.header=true; 查看表结构 desc table; 详细的表结构 desc formatted table; 删除表 drop ...

  5. man命令的使用方法

    转载自:http://www.cnblogs.com/hnrainll/archive/2011/09/06/2168604.html Linux man命令的使用方法 Linux提供了丰富的帮助手册 ...

  6. Maven精选系列--classifier元素妙用

    首先来看这么一个依赖 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json- ...

  7. 17-Ubuntu-文件和目录命令-切换目录-相对路径和绝对路径

    1.相对路径: 在输入路径时,最前面不是/或者~,表示相对当前目录所在的目录位置. 例:当前桌面目录下,通过相对路径切换到桌面目录下的Entertainment目录 2.绝对路径: 在输入路径时,最前 ...

  8. 【2018ACM/ICPC网络赛】焦作赛区

    A Magic Mirror 题目链接:https://nanti.jisuanke.com/t/31710 题意:输入字符串,如果是“Jessy”就输出“Good Guy!",否则输出“D ...

  9. Mybatis 使用Mapper接口的Sql动态代码方式进行CURD和分页查询

    1.Maven的pom.xml 2.配置文件 2.1.db.properties 2.2.mybatis.xml 2.3.log4j.xml 3.MybatisUtil工具类 4.Mapper映射文件 ...

  10. php pdo 获取数据转换为json

    php 查询语句获取数据,数据库有好多表现形式,如何拿出自己需要的数据 $raceSQL ='select id, race_name,race_code,content from je_race ' ...