如何解决CSS - Equal Height Columns?
Flexbox
假设这种布局:
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>
对于flexbox,等高列只是一个声明:
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
}
浏览器支持:http : //caniuse.com/flexbox ;
Table layout
如果仍然需要支持IE 8或9,则必须使用表布局:
.row {
display: table;
}
.col {
display: table-cell;
width: 33.33%; /* depends on the number of columns */
}
解决方法
CSS有可能吗?
如果是,如何在不显式指定高度的情况下做到这一点(让内容增加)?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。