css - 2列で同じ高さ

Question

このマークアップで：

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

次のようにスタイルを設定するにはどうすればよいですか。

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

各ペアの高さが同じになるように？高さは、コンテンツが長い記事から取得する必要があります。つまり、 CのコンテンツがDより長い場合、DはCの高さと一致する必要があります。

今まで試したのは古き良きフロートですが、フロートなので中身によって高さが変化します。

私も同様のことをグーグルで検索しましたが、私が見つけたのは、余分なコンテンツを隠すだけの固定高さの列です。

Answer 1

渦巻くものには等高関数を使用してください

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}


$(document).ready(function() {
    equalHeight($(".recent-article"));

});

// HTML

<div class="wrapper">
    <article class="recent-article">A</article>
    <article class="recent-article">B</article>
    <article class="recent-article">C</article>
    <article class="recent-article">D</article>
    <article class="recent-article">E</article>
    <article class="recent-article">F</article>
</div>

Answer 2

これをテーブルに置く必要があります。

<div class="wrapper">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <article class="recent-article">A</article>
        </td>
        <td>
            <article class="recent-article">B</article>
        </td>
    </tr>
    <tr>
        <td>
            <article class="recent-article">C</article>
        </td>
        <td>
             <article class="recent-article">D</article>
        </td>
    </tr>
    <tr>
        <td>
            <article class="recent-article">E</article>
        </td>
        <td>
            <article class="recent-article">F</article>
        </td>
    </tr>
    </table>