Question

我一直在努力解决这个小问题。我希望'col3'的所有子div都是相同的高度。因此，每个边框将从上到下延伸。

我发现了这个类似的问题，但这似乎没有解决多个列，并且链接已损坏:( - How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

<div class="container">
<div class="col3">
                <div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta.
                    </p>
                </div>
                <div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. Duis interdum suscipit dui et pulvinar. Curabitur turpis nisi, congue vel aliquet et, iaculis in leo. Maecenas pellentesque felis eget lectus viverra feugiat. In hac habitasse platea dictumst. Integer eget accumsan risus. Fusce ac lectus odio, non placerat tortor. 
                    </p>
                </div>  
                <div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. Duis interdum suscipit dui et pulvinar. Curabitur turpis nisi, congue vel aliquet et, iaculis in leo. Maecenas pellentesque felis eget lectus viverra feugiat. In hac habitasse platea dictumst. Integer eget accumsan risus. Fusce ac lectus odio, non placerat tortor.
                    </p>
                </div>
            </div>

这是一个jsFiddle：http://jsfiddle.net/wUtk9/1/ - 我提供了两个示例，一个是典型的三列布局，另一个是跨越两列的列。就像桌子的“colspan”一样。

使用jQuery解析是否理想？

Answer 1

如果您对IE7不感兴趣，可以使用以下样式：

div.col3 {
    display:table;
}

.col3 > div {
    display:table-cell;
}

http://jsfiddle.net/wUtk9/8/

<强>更新

http://jsfiddle.net/wUtk9/10/（多行布局）

http://jsfiddle.net/wUtk9/11/（jQuery版）

Answer 2

试试这个：

var maxHeight=0;
$('div.col3 div').each(function(){
    if( $(this).height() > maxHeight ) maxHeight = $(this).height();
});
$('div.col3 div').height(maxHeight);

<强> jsFiddle example

将所有子div的高度调整为父高100％

2 个答案: