布局方案

等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8" />

 <title>高度自适应布局</title>

 <style>

 body{ padding:0; margin:0; color:#f00;}

 .container{ margin:0 auto; width:600px; border:1px solid #00C;

     overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/

 }

 .left{ float:left; width:150px; background:#B0B0B0;

     padding-bottom:2000px;

     margin-bottom:-2000px;

 }

 .right{ float:left; width:450px; background:#6CC;

    padding-bottom:2000px;

    margin-bottom:-2000px;

 }

 </style>

 </head>

 <body>

 <div class="container">

     <div class="left">我是left</div>

     <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>

     <div style="clear:both"></div>

 </div>

 </body>

 </html>

css两列等高布局的更多相关文章

  1. 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

    代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

  2. css两列自适应宽度布局（左定宽，右自适应）

    1.利用BFC: <div id="root"> <div class="left">左</div> <div cla ...

  3. 利用jQuery进行三行两列等高布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  5. css设置多列等高布局

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

  6. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  7. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  8. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  9. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. C#解压或压缩文件夹

    这里主要解决文件夹包含文件夹的解压缩问题.1)下载SharpZipLib.dll,在http://www.icsharpcode.net/OpenSource /SharpZipLib/Downloa ...

  2. 使用B或BL跳转时，下一条指令的地址的计算

    .text .global _start 3_start: b step1 step1: ldr pc, =step2 step2: b step2 反汇编代码: : eaffffff b 0x4 : ...

  3. 快速排序——PowerShell版

    继续读啊哈磊算法有感系列,继续升华.上一篇是冒泡排序,在结尾总结了一下冒泡排序的缺点——时间复杂度O(N*N)太大.这一篇来说一下快速排序,快速排序可以在多数情况下克服冒泡排序的缺点(最坏的情况下和冒 ...

  4. 关于django模型里面的__str__和__unicode

    简而言之,就是__str__和__unicode__都是为了再管理站点中加载这个表时想显示什么属性,当然一般都是显示一个name,大体来讲是通用的.下面是抄的csdn上面的一篇文章. str()是Py ...

  5. 【C++程序员学 python】python 之变量

    既然学过C++,那么就应该知道变量是什么,常量是什么. python 相比于C++,在使用变量之前不用先声明. 而是直接使用,python 会根据你的变量自动识别其类型. 假如a = 123 那么a ...

  6. JavaScript高级 面向对象（10）--onload与jq中ready的区别

    说明(2017.4.2): 1. 在body中放一个img标签,src链接一张图片,那么页面会先读取html的document文档,然后再读取外部资源(这里没加onload其实就是从上往下顺序读取). ...

  7. win8 X64 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序

    操作系统是Windows 8 64位,安装了Microsoft Office 2013,从SQL Server 2008中导入Excel文件时出现提示: 未在本地计算机上注册“Microsoft.AC ...

  8. 【转】MIUI8以及ViVO X9上在Android Studio运行出错集及其解决方案

    最近用一台红米4高配版(6.0)以及ViVo X9(7.1)来做测试机,它是小米MIUI系统的最新版本MIUI8,我的AS是2.3版本,在网上查看了相关问题,在小米5和红米note4x等配备了MIUI ...

  9. 【Unity笔记】摄像机、图片的模糊处理

    重要的参考: http://www.imooc.com/video/7303 摄像机模糊 http://www.xuanyusong.com/archives/3541 http://www.cnbl ...

  10. Makefile 编译动态库文件及链接动态库

    本文为原创文章,转载请指明该文链接 文件目录结构如下 dynamiclibapp.c Makefile comm/inc/apue.h comm/errorhandle.c dynamiclib/Ma ...