两列等高答案

【问题标题】：Two-Columns and Equal Height两列等高
【发布时间】：2012-08-25 05:52:53
【问题描述】：

使用此标记：

<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 的高度匹配。

到目前为止，我尝试过的是好的旧浮动，但由于它是浮动的，因此它具有取决于内容的可变高度。

我也用谷歌搜索过类似的东西，但我发现的是固定高度的列，它们只是隐藏了额外的内容。

【问题讨论】：

你为什么不使用 table 来实现它....一个非常简单的方法
这将是一个响应式设计，所以没有桌子。

标签： css css-float two-column-layout equal-heights

【解决方案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>

【讨论】：

OP 希望每个 pair 的高度相等。所以这有点偏离。
我们可以对我们希望具有相同高度的 div 使用相同的类
如果可能的话，我不想要 JS。
然后使用表格，表格是创建等高布局的最佳方式
这不是表格数据，那些是文章，所以我不会使用表格。此外，我会让它响应。

【解决方案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>

【讨论】：