Question

我正在尝试创建一个网格布局，它会调整所有子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：我无法使用固定高度，原因有两个：

客户端将能够编辑此文本，因此我无法始终知道高度。
这是一个响应式网站，所以我必须做一大堆休息，以确保事情始终显示在正确的高度。

Answer 1

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

请参阅上面的链接。这些人创建了一个jQuery插件来实现你所追求的效果。

Answer 2

如果您在height中添加了.grid > div代码，例如200px，则200px

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

Answer 3

您的解决方案仅适用于单个水平线中的4个DIV。改变宽度看！如果你需要2X2，只有CSS才能动态地使所有4的高度相同。你需要使用脚本来控制它或者设置一个不会动态的高度！

将四个div的网格展开以匹配最高的高度

3 个答案: