1

我有这个标记：

<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    |
|       |         |
|-------|---------|
4

4 回答 4

2

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

演示：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);
于 2012-08-30T16:38:26.520 回答
1

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

将该标记转换为行：

<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>元素，但确保每个.rowdivclear: both在 CSS 中都有。

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

于 2012-08-30T15:59:11.453 回答
0

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

于 2012-08-30T16:15:55.597 回答
0

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

于 2012-12-01T05:52:32.970 回答