Две колонки и одинаковая высота

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.

До сих пор я пробовал старый добрый float, но, поскольку он float, он имеет переменную высоту, которая зависит от содержимого.

Я также гуглил подобные вещи, но я обнаружил столбцы с фиксированной высотой, которые просто скрывают дополнительное содержимое.

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>