CSS – 等高列?

前端之家收集整理的这篇文章主要介绍了CSS – 等高列?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在CSS中,我可以这样做:

但我不知道如何改变,像:

这是可能与CSS吗?

如果是,我怎么做,没有明确指定高度(让内容增长)?

解决方法

FlexBox

如果你在2013年下半年阅读,你可以使用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; demo:http://jsfiddle.net/7L7rS/

表布局

如果你仍然需要支持IE 8或9,那么你必须使用表格布局:

.row {
    display: table;
}

.col {
    display: table-cell;
    width: 33.33%; /* depends on the number of columns */
}

演示:http://jsfiddle.net/UT7ZD/

原文链接:https://www.f2er.com/css/222702.html

猜你在找的CSS相关文章