• Home
  • home > webfront > style > css >

    多列等高布局的方法汇总，分别css2.1，css3实现

    Author：zhoulujun@live.cn Date：

    等高布局如何实现，传说中的两翼双飞布局是什么鬼？右边高度跟随内容高度如何实现？

    比如我的网站，如果要实现左右等高，或者多列等高布局，兼容ie8，如何做？

    如果用css3，实现，倒是比较简单，display:box; 就搞定。

    但是，是用css2

    周陆军的个人网站首页

    其实，这个还是比较简单的：

    代码如下：

    <!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:3px 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>

    在进行具体操作的时候，padding-bottom的值大小取决于你的项目的实际情况，如果不确定，设大一点也无所谓。


    转载本站文章《多列等高布局的方法汇总，分别css2.1，css3实现》,
    请注明出处：https://www.zhoulujun.cn/html/webfront/style/cssBase/2016_1222_7925.html

    收藏
    上一篇：css闭合浮动与清除浮动
    下一篇：chrome表单自动填充完成后input/textarea/select背景色无法去除
    延伸阅读：
    TOP