Question

如何让.box div拉伸到最高的盒子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>

CSS

.container { 
}
.box { 
    float: left; 
    background-color: red; 
    padding: 10px;
}

这是jsfiddle：http://jsfiddle.net/8QbGk/1

Answer 1

将float:left更改为display:table-cell。

.box { 
    display:table-cell;
}

Demo here.

Answer 2

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

.container { 身高：自动; / 其他属性 / }

.box { 身高：100％; 宽度：100％; / 其他属性 / }

Answer 3

height: 100%;

将其添加到您的包装盒样式中。

Answer 4

您可以尝试以下方式：

.container {
  height: auto;
}

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

Answer 5

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

height: inherit;

See:

使父div与父div一样长

5 个答案: