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>

これはフロートされ、2列のリストを形成します。各記事は、その内容のために可変の高さを持っています。

私が欲しいのは、2つのペアのどちらが最も高い高さであるかに基づいて、各ペアが同じ高さを持つ必要があることです。私は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>要素を再度フロートしますが、各.rowdivがclear: bothCSSに含まれていることを確認してください。

そうすれば、すべての「行」が同じ高さになり、その中に最も高いコンテンツが含まれます。

于 2012-08-30T15:59:11.453 に答える
0

常に2列が必要な場合は、divで区切るのが良い解決策ですが、ブラウザーの幅が十分に広い場合は、3列に変更することをお勧めします。同位体を見たことがありますか？ 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 に答える