1

div常に同じ高さにしたい列 ( s) がいくつかあります。

私はZurb Foundationを使用しているため、レイアウトはこのようになり、divs を他の中に入れて引き伸ばすことはできません。

<div class="row equalheight">
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
</div>

おそらくCSSでは簡単ではないでしょうが、どうすればすべての列を自動的に同じ高さにすることができますか?

以下の解決策であるjqueryを使用してこれを修正することができました。

4

3 に答える 3

2

ちょっと時間をかけて自分で答えを思いつくことができたeureka!ので、コミュニティのために共有したいと思いました.

を使用して要素のそれぞれをループしchildren、最大サイズを変数に保存してから、そのサイズをすべての子要素に設定しました。

load関数をウィンドウとresizeイベントにバインドしました。

<script>
function equalheight() {    
    $('.equalheight').each(function(index) {
        var maxHeight = 0;
        $(this).children().each(function(index) {
            if($(this).height() > maxHeight) 
                maxHeight = $(this).height();
        });
        $(this).children().height(maxHeight);
    });    
}

$(window).bind("load", equalheight);
$(window).bind("resize", equalheight);
</script>

完璧に動作します！

于 2013-02-19T21:11:48.863 に答える
0

マークアップを変更せずに、これは同じ高さの列を作成するための最も簡単な方法です。

http://jsfiddle.net/Nu5KN/

div.equalheight {
    display: table;
    width: 100%; /* optional */
}

div.equalheight .columns {
    display: table-cell;
}
于 2013-02-19T21:39:57.643 に答える
0

次のWebサイトを確認してください。

http://css-tricks.com/fluid-width-equal-height-columns/

于 2013-02-19T21:20:44.177 に答える