css - 如何通过CSS调整一系列DIV的高度

Question

在与 float:left 排成一行的一系列 DIV 中( SEE EXAMPLE )

<div class="row">
    <div class="box">
        line<br />line<br />line
    </div>
    <div class="box">
        line
    </div>
    <div class="box">
        line<br /><br /><br />line<br />line<br />
    </div>
</div>

是否可以调整所有 child 的高度DIV给最高的 child DIV , 这确实是 parent 的实际高度 DIV .换句话说，我们希望在不知道内容长度的情况下，让所有 child 的高度都相等。

我知道首选方法是使用 JS , 但我很好奇 CSS 是否有可能仅有的。我认为应该可以通过考虑由最高 child 定义的 parent 高度来实现。

Answer 1

您可以将 div 放入容器中。如果您需要一个等高的 div，容器将始终是最高的高度。这确实增加了一点复杂性，但它避免了 JS，我认为这最终可能是你想要的。如果没有，我可以删除这个答案。

http://jsfiddle.net/zjScK/1/

HTML

<div class="row">
    <div class="container3">
        <div class="container2">
            <div class="container1">
                <div class="box">
                    line<br />line<br />line
                </div>
                <div class="box">
                    line<br /><br /><br />line<br />line<br />line<br /><br /><br />line<br />line<br />
                </div>
                <div class="box">
                    line<br /><br /><br />line<br />line<br />
                </div>
            </div>
        </div>
    </div>
</div>

样式表

body
{
    margin:0;
}

.container3 {
    clear:left;
    float:left;
    width:100%;
    position:relative;
    right:70%;
    background-color:red; /* column 3 background color */
}
.container2 {
    clear:left;
    float:left;
    width:100%;
    position:relative;
    right:10%;
    background-color:lime; /* column 2 background color */
}
.container1 {
    float:left;
    width:100%;
    position:relative;
    right:10%;
    background-color:yellow; /* column 1 background color */
}

.box {
    float:left;
    width:10%;
    position:relative;
    left:90%;
    overflow:hidden;
    background-color:blue;
}

这里也有对此的引用:http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm

另一个有类似问题的帖子:Floating divs left, make all divs height equal the tallest div in it's row?

希望这对您有所帮助!