每行对齐2个DIV，两者高度相同 [英] Align 2 DIV per line, both the with the same height

问题描述

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

We have a problem where we need to have a list of divs with dynamic content. There will always be 2 divs per row. Both of those elements should have the same height.

当前，我们有一个解决方案，可以用JavaScript设置盒子的高度，但是它的性能不是很好，因为它会重新计算

Currently we have a solution which sets the height of the boxes with JavaScript, but it's not very performant, since it recalculates the sizes on every resize (Responsive design).

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

Is there a solution without fixed height values?

重要提示：框仍然需要填充，并且填充必须以百分比（当前div的利润率为4％）

Important: The boxes still need to be padded, and the padding needs to be in percent (currently 4% margin on div)

Jsfiddle： http://jsfiddle.net/6dmwU/

Jsfiddle: 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>

任何帮助将不胜感激

推荐答案

您可以为此使用弹性模型：

You can use a flex model for this:

.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

jsFIddle

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

This way every row will be the height of the highest child element. However the support for this is limited.

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

So if you rather not use this method you can transform you structure in a table structure. This way every row will be the height of the highest child element.

.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;
}

因为我使用的表单元格之间的边距不起作用，所以边框间距定义单元格之间的分隔。

Because margin doesn't work between table-cells i used border-spacing to define the seperation between the cells.

jsFiddle

jsFiddle

这篇关于每行对齐2个DIV，两者高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！