1

我一直在努力解决这个小小的 CSS 问题。我希望“col3”的所有子 div 都具有相同的高度。因此，每个边界都会从上到下延伸。

我发现了这个类似的问题，但这似乎没有解决多个列，并且链接已损坏:(--如何在不指定父母高度的情况下将子 Div 强制为父母 Div 的 100%？

<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解决的理想选择吗？

4

2 回答 2

2

如果你不介意 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版）

于 2013-04-03T14:05:48.017 回答
0

试试这个：

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

jsFiddle 示例

于 2013-04-03T13:55:01.880 回答