每行对齐 2 个 DIV，高度相同

我们遇到一个问题，我们需要一个包含动态内容的 div 列表。 每行始终有 2 个 div。这两个元素应该具有相同的高度。

目前我们有一个使用 JavaScript 设置框高度的解决方案，但它的性能不是很好，因为它会在每次调整大小时重新计算尺寸（响应式设计）。

有没有没有固定高度值的解决方案？

重要提示：盒子仍然需要填充，并且填充需要以百分比为单位（当前 div 的边距为 4%）

杰斯小提琴：http://jsfiddle.net/6dmwU/

<div class="boxes">
    <div class="box-wrapper">
        <div class="box" style="height: 203px;">
            <p class="box-title">Lorem Vulputate</p>
            <p>On corerias sunturero in cullabore dolestionet apid utatur On corerias sunturero in cullabore dolestionet apid utatur</p>
        </div>
        <div class="box" style="height: 203px;">
            <p class="box-title">Egestas Pharetra</p>
            <p>On corerias sunturero in cullabore dolestionet apid utatur</p>
        </div>
    </div>
    <div class="box-wrapper">
        <div class="box" style="height: 151px;">
            <p class="box-title">Vulputate Egestas</p>
            <p>On corerias sunturero in cullabore dolestionet apid utatur</p>
        </div>
        <div class="box" style="height: 151px;">
            <p class="box-title">Egestas Pharetra</p>
            <p>On corerias sunturero in cullabore dolestionet apid utatur</p>
        </div>
    </div>
</div>

任何帮助将不胜感激

您可以为此使用 Flex 模型：

.boxes .box 
{
    margin-left: 2%;
    margin-bottom: 2%;
    width: 50%;
    padding: 4%;
    border: 1px solid #b6b6b6;
    border: 0.0625rem solid #b6b6b6;
    box-sizing: border-box;
}

.box-wrapper
{
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

jsFIddle

这样每一行都将是最高子元素的高度。 然而对此的支持是有限的。

因此，如果您不想使用此方法，您可以将结构转换为表结构。这样每一行都将是最高子元素的高度。

.boxes .box 
{
    display: table-cell;
    margin-left: 2%;
    margin-bottom: 2%;
    width: 50%;
    padding: 4%;
    border: 1px solid #b6b6b6;
    border: 0.0625rem solid #b6b6b6;
    box-sizing: border-box;

}

.box-wrapper
{
    display: table-row;
}

.boxes
{
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
}

因为边距在我使用的表格单元格之间不起作用border-spacing定义单元格之间的间隔。

jsFiddle