0

在一系列 DIV 中放置在一行中float:left（参见示例）

<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>

是否可以将所有childDIV的高度调整为最高的child DIV，这确实是parent的实际高度DIV。换句话说，我们想让所有孩子的身高相等，而不知道内容的长度。

我知道首选的方法是使用JS，但我很好奇它是否可能CSS。我认为通过考虑由最高的孩子定义的父母身高应该是可能的。

4

1 回答 1

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

另一个帖子也有类似的问题：向左浮动 div，让所有 div 的高度等于其所在行中最高的 div？

希望这会有所帮助！

于 2013-07-22T10:53:29.483 回答