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

【问题标题】：Is there a way to make divs the height of the line有没有办法让 div 成为行的高度
【发布时间】：2014-11-05 04:39:07
【问题描述】：

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

例如，在this fiddle 中，我希望框 1、2、3 和 5 与框 4 的高度相同，而无需添加任何其他元素或使用硬编码高度，并且它必须返回到 IE8 .这可能吗？

可能是这样的：

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

【问题讨论】：

列高相同的典型问题。太糟糕了，如果没有 js（直截了当）或额外的标记（如果你有兴趣查看this amazing article），就不可能解决它。

标签： html css height

【解决方案1】：

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

jsFiddle example

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

jsFiddle example

【讨论】：

【解决方案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

【讨论】：