在项目开发中，经常遇到需要多列等高布局的需求。解决这种的需求的方法有很多，各有利弊，现总结如下。
方法一：使用flex布局
优点：实现方便，还可以方便实现各种比例 ； 缺点: IE9及IE9以下版本不支持flex属性
<div class="container">
<div class="left">多列等高布局左多列等高布局左</div>
<div class="right">多列等高布局右</div>
</div>.container{
display:flex;
}
.left,.right{
flex:1;
}
.left{
background:pink;
}
.right{
background:green;
}方法二：流体布局
优点：兼容各种浏览器；缺点：嵌套太多DIV元素；
以两列等高布局为例
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2；Column 2；Column 2；Column 2；Column 2</div>
</div>
</div>// 在这里有两列，故需要两个容器
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
right: 30%;/* 距离是第二列的宽度，加上2%的padding */
}
#col1 {
width: 66%;
float: left;
position: relative;
left: 32%;/* container1容器right:30%;加上内边距2%，故为32%； */
}
#col2 {
width: 26%;
float: left;
position: relative;
left: 36%;/* 加上三个内边距，所以是 36%；*/
}这种布局的原理是给每一列添加相对应用的容器，并进行相互嵌套。这里需要注意的是想要多少列等高，就需要多少个容器
方法三：使用内外边距相抵消
优点：兼容所有浏览器；缺点：暂没发现；需要注意的是父元素添加overflow：hidden
<div id="container">
<div id="left" class="column aside">
<p>Sidebar</p>
</div>
<div id="content" class="column section">
<p>Main content；content；content；content；content</p>
</div>
<div id="right" class="column aside">
<p>Sidebar</p>
</div>
</div>#container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
.column {
background: #ccc;
float: left;
width: 200px;
margin-right: 5px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
}
#right {
float: right;
margin-right: 0;
}原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/css/multi-column-layout.html
微信扫一扫 
支付宝扫一扫 
