1

jQuery を使用して、セクション要素にグループ化された 3 つの div 要素を反復処理し、それらの高さを均等にしています。その部分は完全に機能しますが、div は、以前は下部が整列していた場所で垂直方向に不均一なままになります。div は、jQuery がそれぞれの高さに追加した量だけ、ページ上で下にシフトしているようです。

これは、問題のないjsFiddle（高さを変更しません）と、問題のあるもの（高さを変更すると、divが台無しになります）です。

これが私のCSSです：

section.myGroup {
    text-align : center;
}

.myBlock {
    margin : 10px;
    padding : 10px;
    text-align : justify;
    display : inline-block;
    width : 275px;
    background-color : #ffffff;
    background-image : url('images/background.png');
    background-repeat : repeat;
    position: relative;
}

そして、ここに私のHTMLがあります:

<section class="myGroup">
    <div class="myBlock">
        <p>Lorem ipsum bla bla bla....</p>
    </div>

    <div class="myBlock">
        <p>Lorem ipsum bla bla bla....</p>
    </div>

    <div class="myBlock">
        <p>Lorem ipsum bla bla bla....</p>
    </div>
</section>

編集: これは、div の高さを均等化するために使用する jQuery です。それはかなり標準的です：

var tallest = 0;

$('.myBlock').each(function() {
    var thisHeight = $(this).height();
    if (thisHeight > tallest) {
        tallest = thisHeight;
    }
});

$('.myBlock').height(tallest);
4

2 に答える 2

2

「float: left」を使用できないため、複雑になると思います。回避策としては、'float: left' を使用しますが、'margin: auto' を使用してセクションを中央に配置する必要があります。ただし、セクションの幅を指定する必要があるという制限があります。

http://jsfiddle.net/YL7ZG/3/embedded/result/

.myGroup {
    width: 576px;
    margin: auto;
}
.myBlock {
    margin : 10px;
    float: left;
    padding : 10px;
    text-align : justify;
    width : 150px;
    background-color : #ccc;
    border: solid black 1px;
}
于 2012-04-27T07:14:28.750 に答える
2

このコードを使用してください - 動作するはずです

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

    equalHeight($('section.myGroup .myBlock'))

デモ - http://jsfiddle.net/bZXFH/

于 2012-04-27T05:45:06.413 に答える