CSS - 等高列？ [英] CSS - Equal Height Columns?

问题描述

在CSS中，我可以这样做：

In CSS, I can do something like this:

但我不知道如何将其改为：

But I've no idea how to change that to something like:

CSS是否可能？

如果是的话，如何在不明确指定高度的情况下p>

If yes, how can I do it without explicitly specifying the height (let the content grow)?

推荐答案

Flexbox

如果您在2013年年底阅读， flexbox在您的处置。假设此布局：

Flexbox

If you are reading this in late 2013, you have flexbox at your disposal. Assuming this layout:

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

对于flexbox，等高列只是一个声明：

With flexbox, equal height columns is just one declaration:

.row {
    display: flex; /* equal height of the children */
}

.col {
    flex: 1; /* additionally, equal width */
}

浏览器支持：http://caniuse.com/flexbox ;演示： http://jsfiddle.net/7L7rS/

Browser support: http://caniuse.com/flexbox; demo: http://jsfiddle.net/7L7rS/

如果您仍然需要支持IE 8或9，则必须使用表格布局：

If you still need to support IE 8 or 9, then you have to use table layout:

.row {
    display: table;
}

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

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

这篇关于CSS - 等高列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！