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/ -- 2 つの例を提供しました。1 つは典型的な 3 列のレイアウトで、もう 1 つは 2 列にまたがる列です。テーブルの「colspan」によく似ています。

これは、jQuery を使用して解決するのに理想的でしょうか?

4

2 に答える 2

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 に答える