Question

我有这个标记：

<div class="wrapper">
    <article>A</article>
    <article>B</article>
    <article>C</article>
    <article>D</article>
    <article>E</article>
    <article>F</article>
    <article>G</article>
    <article>H</article>
</div>

浮动并形成一个两列列表。每个文章由于其内容而具有可变高度。

我想要的是每一对应该具有相同的高度，基于两者中哪一个具有最高的高度。我找到了 equalHeights 插件的变体，但它们都强制对所有元素都有相同的高度。我只需要每对都是相同的高度，而不是所有的元素。这是可能的还是现有的插件？

注意：无法更改文章标记，因为它是由CMS输出的。

我的预期输出：

|-------|---------|
|   A   |    B    |
|-------|---------|
|       |         |
|   C   |    D    |
|       |         |
|       |         |
|       |         |
|-------|---------|
|       |         |
|   E   |    F    |
|       |         |
|-------|---------|

Answer 1

这里有一些代码可以将高度设置为最大高度，通过列数来分割文章块，而不是任何其他结构方法。

演示：http://jsfiddle.net/bgWaw/

var articles = $('.wrapper article');

var columns = 2;

var cIndex = 0;
while (cIndex < articles.size()) {
    var cMaxHeight = 0;
    for (cColumn = 0; cColumn < columns; cColumn++) {
        var cArticle = articles.eq(cIndex + cColumn);
        if (cArticle.size() > 0) {
            cMaxHeight = (cArticle.height() > cMaxHeight ? cArticle.height() : cMaxHeight);
        }
    }

    articles.slice(cIndex, cIndex + columns).height(cMaxHeight);

    cIndex += columns;
}

如果需要，可以很容易地将其转换为插件。只需将其作为$.fn对象中的函数并使用this而不是文章并将列作为参数传递给函数即可。

jQuery插件版本演示：http://jsfiddle.net/bgWaw/2/

$.fn.maxSliceHeight = function(columns) {
    var cIndex = 0;
    while (cIndex < this.size()) {
        var cMaxHeight = 0;
        for (cColumn = 0; cColumn < columns; cColumn++) {
            var cElem = this.eq(cIndex + cColumn);
            if (cElem.size() > 0) {
                cMaxHeight = (cElem.height() > cMaxHeight ? cElem.height() : cMaxHeight);
            }
        }

        this.slice(cIndex, cIndex + columns).height(cMaxHeight);

        cIndex += columns;
    }

    return this;
}

示例电话：

$('.wrapper article').maxSliceHeight(2);

Answer 2

与我的评论相反，您可以使用另一种方法：

将该标记转换为行：

<div class="row">
    <article>A</article>
    <article>B</article>
</div>
<div class="row">
    <article>C</article>
    <article>D</article>
</div>
<div class="row">
    <article>E</article>
    <article>F</article>
</div>

再次浮动<article>个元素，但请确保每个.row div在CSS中都有clear: both。

这样每个“行”都是相同的高度，其中包含最高的内容。

Answer 3

如果你真的想要总是两列，那么用div分隔是一个很好的解决方案，但我认为如果浏览器足够宽，你可能想要更改为三列。你看过同位素吗？ http://isotope.metafizzy.co/

Answer 4

我在不更改标记的情况下找到了解决方案：http://css-tricks.com/equal-height-blocks-in-rows/

每对响应jQuery等高

4 个答案: