Question

我正在使用jQuery迭代在section元素中分组的三个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

请使用此代码 - 应该是正常工作

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/

Answer 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;
}

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

2 个答案: