<!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. SPSS进行数据分析的一般步骤

    SPSS进行数据分析的一般步骤 利用SPSS进行数据分析的一般步骤 利用SPSS进行数据分析的关键在于遵循数据分析的一般步骤,但涉及的方面会相对较少.主要集中在以下几个阶段. 1．SPSS数据的准备阶 ...

  2. Linux下同一目录内文件和目录为什么不能同名？

    问题描述: 如果事先有叫‘A’的文件夹存在,则不允许建立叫‘A’的文件: 同理若先有叫‘b’的文件存在,一样不允许建立叫‘b’的文件夹. 原因很简单,因为Linux下一切都是文件,一个目录归根到底还是 ...

  3. spring-boot-configuration-processor

    spring默认使用yml中的配置,但有时候要用传统的xml或properties配置,就需要使用spring-boot-configuration-processor了 引入pom依赖 <de ...

  4. 升级MySQL5.7.22版本_总结记录

    目录 一. mysql5.7安装 0. 背景 1. 准备:下载安装包 2. 安装流程小结 3. 具体步骤 二. mysql5.7的一些变化 一. mysql5.7安装 0. 背景 之前用的5.6版本, ...

  5. spark-sql性能优化之——多线程实现多Job并发执行

    直接上代码 val spark = SparkSession.builder() .appName("name") .master("local[2]") .g ...

  6. Nginx+win10安装配置

    一.前言 Nginx是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx可以进行反向代理.负载均衡.HTTP服务器(动静分离).正向代 ...

  7. 002-Java数据类型

    Java数据类型 基本数据类型 和 引用数据类型 基本数据类型 整型:byte - 8bit / short - 2字节 / int - 4字节 / long - 8字节 浮点型:float doub ...

  8. css之页面三列布局之左右上下高度固定，中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  9. Linux（Centos7）安装ngnix服务器

    Ngnix服务器是一款优秀的静态页服务器软件和反向代理服务器软件 目前,centos安装ngnix可以yum安装也可以下载安装,我们为了扩展方便,选择下载安装.yum一键安装没什么好说的. 一.安装编 ...

  10. bias、variance与拟合之间的关系

    Error = Bias^2 + Variance+Noise 误差的原因: 1.Bias反映的是模型在样本上的输出与真实值之间的误差,即模型本身的精准度,即算法本身的拟合能力. 2.Variance ...