Css 使子div与父div一样长

如何使.box div伸展到与最高的box div一样高

HTML

<div class="container">
    <div class="box">La</div>
    <div class="box">Lalala<BR>lala</div>
    <div class="box">Lorem ipsum<br>dolor sit<BR>amet</div>
    <div class="box">la</div>
</div>

这是JSFIDLE：

---

将其添加到您的方框样式中。

您可以尝试以下方法：

.container {
  height: auto;
}

.box {
  height: 100%;
  float: left; 
  background-color: red; 
  padding: 10px;
}

---

将

float:left

更改为

display:table cell

.box { 
    display:table-cell;
}

---

对子元素使用以下样式。它将采用父元素高度

height: inherit;

---

您必须将高度和宽度设置为100%，如：

.集装箱{ 高度：自动； /其他财产/ }

.盒子{ 身高：100%； 宽度：100%； /其他财产/

---

}

惰性解决方案是在.box上设置最小高度或高度…您的容器没有高度。你是在问如何创建等高的列吗？我知道我可以做“height:XXpx”。但我想做的是使长方体div动态拉伸以匹配最高长方体div的高度。看起来这一个可行！我没见过显示：表单元格太多；是否认为使用它是最佳实践？编辑：我刚刚将display:table单元格应用到我的网站，但它不起作用。请参阅名为“banner”的绿色div，它将元素视为表单元格。我认为这不是一个好的做法。@b WithLove，它像表格单元格一样显示元素。这就是我的注释的意思。我认为这一点是在没有固定高度的情况下完成的。属性本身说，Inherit。正如我提到的，它只需要父元素的高度，不管它是固定的还是非固定的。移除容器的高度和宽度，你会发现它不起作用。这就是我要说的，你之所以能工作，是因为你用了一个固定的像素量来表示高度。显然，如果允许固定高度，这个问题将立即得到解决。它应该是动态的

.box { 
    display:table-cell;
}

height: inherit;