<!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. NSDateFormatter 今年日期格式化成字符串是明年日期问题？

    在项目里我要是把NSDate格式化成字符串 我的format是@"YYYY年MM月dd日 HH:mm" 传入日期2013-12-30 15:00:00后,返回给我的字符串是 201 ...

  2. 如何将Canvas中内容保存为图片

    Bitmap bm = Bitmap.createBitmap(320, 480, Config.ARGB_8888); Canvas canvas = new Canvas(bm); Paint p ...

  3. Linux ifconfig 单网卡配置多网段

      1 2 3 4 5 6 7 8 9 10 11 ifconfig eth0 down ifconfig eth0 hw ether 01:02:03:04:05:06 ifconfig eth0  ...

  4. Comparison of FastText and Word2Vec

    Comparison of FastText and Word2Vec   Facebook Research open sourced a great project yesterday - fas ...

  5. Tomcat下载部署及解决中文乱码显示

    一.下载 tomcat下载链接:https://tomcat.apache.org/ 1.进入tomcat官网后,我使用的是tomcat9,所以我选择tomcat9.然后点击core下的zip包下载. ...

  6. scala 常用模式匹配类型

    模式匹配的类型 包括: 常量模式 变量模式 构造器模式 序列模式 元组模式 变量绑定模式等. 常量模式匹配 常量模式匹配,就是在模式匹配中匹配常量 objectConstantPattern{ def ...

  7. 关于strtok函数

    函数原型: char *strtok(char * strToken, const char *strDelimit) 参数说明: strToken:源字符串,即待分割的串 strDelimit:st ...

  8. D3.js的基础部分之数组的处理 集合(Set)(v3版本)

    数组的处理 之 集合(set) 集合(Set)是数学中常用的概念,表示具有某种特定性质的事物的总体.集合里的项叫做元素.集合的相关方法有:   d3.set([array]) //使用数组来构建集合, ...

  9. netty 文件传输

    FileServer package com.zhaowb.netty.ch13_1; import io.netty.bootstrap.ServerBootstrap; import io.net ...

  10. sparkStreaming的transformation和action详解

    根据Spark官方文档中的描述,在Spark Streaming应用中,一个DStream对象可以调用多种操作,主要分为以下几类 Transformations Window Operations J ...