<!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. Unity3D中的线程与协程

    线程 Unity3D是以生命周期主线程循环进行游戏开发. Unity3D中的子线程无法运行Unity SDK(开发者工具包,软件包.软件框架)跟API(应用程序编程接口,函数库). 限制原因:大多数游 ...

  2. 如何优雅的使用Objects.requireNonNull(T obj, String message)定制你的NPE异常

    IDEA中习惯跟踪源码实现逻辑,多次碰到Objects.requireNonNull(T obj)这个方法,改方法主要用于提早判断对象是否为空,以便更早的抛出NPE 平时小组开发中强调程序健壮性,不允 ...

  3. hadoop 8088 看不到mapreduce 任务的执行状态

    进到8088页面后,怎么看不到mapreudce的执行状态,有哪里需要配置的 解决办法: 在$HADOOP_HOME/conf/mapred-site.xml 在原来的配置文件基础之上添加: < ...

  4. RocketMQ核心技术精讲与高并发抗压实战

    1:特点 比较吃内存 内存至少1g 默认8g 1:支持集群模型,强调集群无单点,负载均衡以及水平扩展能力2:亿级别的消息堆积能力3:采用零拷贝原理Consumer 消费消息过程,使用了零拷贝 顺序写盘 ...

  5. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  6. HTML_页面注册案例

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

  7. Permission denied: user=root, access=WRITE, inode="/":hdfs:supergroup:drwxr-xr-x

    通过手动安装CDH没权限 [root@slave1 ~]# groupadd supergroup[root@slave1 ~]# hadoop fs -mkdir /tao3^C[root@slav ...

  8. spark函数sortByKey实现二次排序

    最近在项目中遇到二次排序的需求,和平常开发spark的application一样,开始查看API,编码,调试,验证结果.由于之前对spark的API使用过,知道API中的sortByKey()可以自定 ...

  9. swing 托盘

    直接上方法, 不过有些问题要注意,最后会说明! private void systemTray() { if (SystemTray.isSupported()) { // 判断系统是否支持托盘功能. ...

  10. MySQL数据库的基本语法

    1.MySQL数据类型数值以及浮点型介绍 2.MySQL数据类型之字符串介绍 常用的有:char.varchar.text. 3.MySQL数据类型之时间类型介绍 常用的是:timestampt,将时 ...