<!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. C++之运算符重载（二元）

    一.加号+ 1.成员函数重载 2.友元函数重载 二.输出符号<< 三.索引符号 [ ] 四.补充说明 1.<二元运算符重载>课程评论: (一)为什么<<运算符的重载 ...

  2. [转]设置修改CentOS系统时区

    在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...

  3. HDU1556-Color the ball-前缀和/线段树/树状数组

    N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的“小飞鸽"牌电动车从气球a开始到气球b依次给每个气球涂一次颜色.但 ...

  4. POJ 4718 /// 树链剖分+线段树区间合并 求树上两点间的LCIS长度

    题目大意: 给定n个点 每个点都有权值 接下来给定树的n条边 第 i 个数 a[i] 表示 i+1到a[i]之间 有一条边 给定q q个询问 每次询问给出 x y 求x到y的最长上升子序列的长度 题解 ...

  5. Oracle SQL外连接

    SQL提供了多种类型的连接方式,它们之间的区别在于:从相互交叠的不同数据集合中选择用于连接的行时所采用的方法不同.连接类型        定义内连接           只连接匹配的行左外连接     ...

  6. Qt学习笔记----信号与槽实现的四种方式

    1.以按钮为例,首先添加一个按钮,对象名为pushButton,在按钮是右键单击选择“转到槽”即可,在转到槽选择面板(右图)里面选择需要进行的操作,比如单击clicked() 2.选择菜单“编辑”,找 ...

  7. launch-s.sh 发布脚本备份

    [root@izm5ef2ow9zssfxi6opoucz code]# cat launch-s.sh serverId=1313 zipName=$1 serverPath='code-s'$se ...

  8. JS对象 数组连接 concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。 语法 arrayObject.concat(array1,array2,.arrayN)

    concat() 方法用于连接两个或多个数组.此方法返回一个新数组,不改变原来的数组. 语法 arrayObject.concat(array1,array2,...,arrayN) 参数说明: 注意 ...

  9. html编写的日历

    1.html (1) <html> <head> <meta http-equiv="Content-Type" content="text ...

  10. FCC——相关练习

    算法题目1:Seek and Destroy(摧毁数组) 金克斯的迫击炮! 实现一个摧毁(destroyer)函数,第一个参数是待摧毁的数组,其余的参数是待摧毁的值. 帮助资源: Arguments ...