正文
[css]等高列的简单实现
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
又碰到css等高布局的问题，发现以前没有总结，这里再把基本原理写一下吧。
1.负边距控制法。
<div id="content">
<div class="left">左边，无高度属性，自适应于最高一栏的高度</div>
<div class="right">右边，无高度属性，自适应于最高一栏的高度</div>
<div class="center">中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应</div>
</div>
<div id="content">
<div class="left">左边，无高度属性，自适应于最高一栏的高度</div>
<div class="right">右边，无高度属性，自适应于最高一栏的高度</div>
<div class="center">中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应中间，宽度自适应</div>
</div>
把容器的overflow设为hidden，给每列都设置大的底部内边距，再用数值相似的负外边距消除这个高度。
#content{
overflow:hidden;
}
.left,.right,.center{
padding-bottom:9999px;
margin-bottom:-9989px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
}
.left{
float:left;
width:200px;
background-color:#eee;
}
.right{
float:right;
width:300px;
background-color:#ddd;
}
.center{
margin-left:230px;
margin-right:330px;
background-color:#999;
}
2.flex布局
同样的html结构。如果是三等分的话，用flex非常简单，align-items的属性默认值是stretch，所以就是等高的，上css代码：
#content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.left,.right,.center {
flex: 1;
}
.left {
order: 0;
background-color: #eee;
}
.center {
order: 1;
margin: 0 10px;
background-color: #999;
}
.right {
order: 2;
background-color: #ddd;
}
