Question

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

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

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

重要提示：这些方框仍然需要填充，填充需要以百分比表示（目前div上的利润率为4％）

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

非常感谢任何帮助

Answer 1

您可以使用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

Answer 2

试试这个

.boxes .box {
    float: left;
    margin-left: 2%;
    margin-bottom: 2%;
    width: 38%;
    padding: 4%;
    border: 1px solid #b6b6b6;
    border: 0.0625rem solid #b6b6b6;
    box-sizing: border-box;
    display:inline-block
}
.box-wrapper,.boxes{
        display:inline-block;
        width:100%;
}

Fiddle

Answer 3

查看this fiddle您可以使用display:table-cell;

CSS：

.row {
    display: table;
    width: 100%;
}
.left {
    width:50%;
    background: blue;
    display:table-cell;
}
.right {
    width:50%;
    background: red;
    display:table-cell;
}

HTML

<div class='row'>
    <div class='left'>

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    </div>
    <div class='right'>

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos

    </div>    
</div>

Answer 4

我使用flexbox，这很神奇^^：

HTML

CSS

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CODEPEN DEMO

css-trick

上的flexbox完整指南

每行对齐2个DIV，两个都具有相同的高度

4 个答案: