css相等的高度div块

Question

我有3个街区

<div>loremloremloremlorem</div>
<div>loremloremlorem</div>
<div>loremloremloremlorem</div>

如何设置CSS以达到水平高度？我不能使用row，因为它的响应式设计和我的1行可以是灵活的项目数。

Answer 1

使用display:table和display:table-cell。

.container {
    display:table;
}

.item {
    display:table-cell;
    width:100px;
    border:2px solid black;
}

.item + .item {
    border-left:none;
}

<div class="container">
    <div class="item">test test test test</div>
    <div class="item">test test test test test test test test test test test test</div>
    <div class="item">test test test test test test test test</div>
</div>

Answer 2

您也可以使用flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

div.container {
    display:flex;
}
div.item {
    border:1px solid #000;
    display:block;
    width:100px;
}

<div class="container">
    <div class="item">lorem lorem lorem lorem lorem lorem</div>
    <div class="item">lorem lorem lorem</div>
    <div class="item">lorem lorem lorem lorem lorem lorem lorem</div>  
</div>

Answer 3

如果您可以将它们包装在容器中，则可以将其设置为display:table并将display:table-cell分配给每个内部DIV。通过这种方式，块被视为表格单元格，因此，alla具有相同的高度。请查看此jsFiddle

<强> CSS ：

#wrapper
{
    display:table;
}

#wrapper div
{
    display:table-cell;
    border:solid 1px red;
    width:50px;
}

Answer 4

您可以在容器div中使用display: table来解决此问题，并在儿童中使用display: table-cell。

请参阅我的CodePen代码：

http://codepen.io/michelgefuni/pen/YPeVxN