有没有办法让div成为行的高度

Question

我在同一行有几个div。 div具有宽度但没有明确的高度。他们从他们包含的文本数量中获得高度。其中一个div比其他div有更多的文本，但我希望它们都是相同的高度。

例如，在this小提琴中，我希望方框1,2,3和5与方框4的高度相同而不添加任何其他元素或使用硬编码高度，它必须返回到IE8。这可能吗？

可能是这样的：

height: line-height; /* i know this isn't a real property */

Answer 1

将display:inline-block更改为display: table-cell：

<强> jsFiddle example

如果您需要摆弄单元格之间的间距，可以将它们包装在容器中并对其应用边框间距：

<强> jsFiddle example

Answer 2

如果有人想使用最新的CSS属性，那么Flexbox是一种可行的方式......

body > div { /* Give an id or a class to your wrapper div */
    display: flex;
}

所以我相信你必须拥有一个包装元素/ div，所以只需将display: flex;指定给你，你就完成了。

<!-- Flex wrapper -->
<div>  <!-- <-- Add this -->
    <div>BOX 1</div>
    <div>BOX 2</div>
    <div>BOX 3</div>
    <div>BOX 4 - But this box has more text</div>
    <div>BOX 5</div>
</div>

如果你想要间距（我认为你不需要它，你的例子中的那个似乎是一个空格问题），但如果你需要，那么我就为子元素提供了保证金。

Demo