jquery - 通过 jQuery 更改高度后如何对齐一组 div 元素的顶部？

Question

我使用 jQuery 迭代分组在一个节元素中的三个 div 元素，并均衡它们的高度。虽然该部分工作完美，但 div 的底部之前对齐的位置在垂直方向上不均匀。 div 似乎在页面上向下移动了 jQuery 添加到其高度的量。

这是一个non-problematic jsFiddle (我不改变高度)和 one with my problem (我改变了高度，它弄乱了 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);

Answer 1

我认为复杂化是因为你无法使用“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;
}