使四个 div 的网格扩展以匹配最高高度答案

【问题标题】：Make a grid of four divs expand to match the tallest height使四个 div 的网格扩展以匹配最高高度
【发布时间】：2015-06-30 05:50:18
【问题描述】：

我正在尝试创建一个网格布局，以调整所有子 div 的大小以匹配组中最高的 div。例如，我有一个 2x2 网格，网格中的每个 div 都包含一些文本。包含最多文本的 div 最高，应推动其他 3 个 div 的高度以匹配。

我可以使用display: flex; 和flex-wrap: wrap; 使每行的 div 高度匹配，但我需要所有行的高度匹配。

这可以通过 CSS 来完成，还是我需要求助于 jQuery？

<section class="grid two">
    <div>
        <div>
            <p>The top left div</p>
        </div>
    </div>
    <div>
        <div>
            <p>The top right div</p>
        </div>
    </div>
    <div>
        <div>
            <p>The bottom left div</p>
        </div>
    </div>
    <div>
        <div>
            <p>The bottom right div</p>
            <p>this has more text, and should casue the rest to strecth to match its height.</p>
        </div>
    </div>
</section>

而我目前的 CSS 是：

.grid {
    display: flex;
    flex-wrap: wrap;
}

.grid > div {
    box-sizing: border-box;
    display: flex;
    flex-directon: column;
    padding: 10px;
    width: 50%;
}

.grid > div > div {
    background: #EEE;
    flex: 1 1 auto;
    width: 100%;
}

这是一个小提琴：http://jsfiddle.net/g41xas6w/

更新 1：我不能使用固定高度有两个原因：

客户端将能够编辑此文本，因此我无法始终知道高度是多少。
这是一个响应式网站，所以我必须进行大量的休息，以确保内容始终以正确的高度显示。

【问题讨论】：

标签： javascript jquery css flexbox

【解决方案1】：

http://brm.io/jquery-match-height/

请参阅上面的链接。这些家伙已经创建了一个jQuery插件来实现你想要的效果。

【讨论】：

谢谢，我可能最终不得不使用它（即使我更喜欢 CSS）。至少这已经是响应式的了！

【解决方案2】：

如果您在.grid > div 中添加height 标记，例如200px，它将全部为200px

.grid > div {
    box-sizing: border-box;
    display: flex;
    flex-directon: column;
    padding: 10px;
    width: 50%;
    height: 200px;
}

【讨论】：

是的，我可以使用固定高度，但正如我所说，我需要它来扩展以适应最高的文本，而不是固定高度。我更新了我原来的问题，详细说明了为什么我不能使用这种方法。

【解决方案3】：

您的解决方案仅适用于单条水平线上的 4 个 DIV。改变宽度和外观！如果您需要 2X2，则仅使用 CSS 不可能动态地使所有 4 个高度相同。您需要使用脚本来控制它，或者设置一个停止动态的高度！

【讨论】：

是的，我想我必须走脚本路线，我对此不太满意。我将把这个问题保持一段时间，看看是否有人有任何创造性的想法。谢谢。