1

我正在使用 jQuery 迭代三个 div 元素，这些元素分组在一个 section 元素中，并均衡它们的高度。虽然这部分工作得很好，但 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

请使用此代码 - 它应该可以工作

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 回答
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 回答