CSS - 相等高度列？

Question

在CSS中,我可以这样做:

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

---

这可能与CSS有关吗？

如果是,我怎么能在没有明确指定高度的情况下做到(让内容增长)？

Answer 1

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 ; 演示: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/

Answer 2

是.

这是本文使用的完整CSS.非常值得阅读整篇文章,因为作者会逐步了解您需要做什么.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

这不是唯一的方法,但这可能是我遇到过的最优雅的方法.

有另一个网站完全以这种方式完成,查看源代码将允许您查看他们是如何做到的.

Answer 3

给overflow: hidden容器和大的(和相等的)负边距和正填充到列.请注意,此方法存在一些问题,例如锚点链接在布局中不起作用.

标记

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

CSS

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

结果

Answer 4

您可以使用以下 JavaScript 轻松完成此操作：

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};