使用纯 CSS 将元素的高度值设置为一行中的最大值答案

【问题标题】：Set elements' height value to the max one in a line with pure CSS使用纯 CSS 将元素的高度值设置为一行中的最大值
【发布时间】：2013-08-21 13:10:56
【问题描述】：

我有 3 个 display:inline-block 样式的 div。我想设置他们的height 值，使其与具有最高值的值匹配。我还想自动设置高度值。我试图在视觉上展示我想要得到的东西。纯 CSS 可以做到这一点吗？

-----    -----    -----          -----    -----    ----- 
|   |    |   |    |   |          |   |    |   |    |   | 
-----    |   |    |   |    ==>   |   |    |   |    |   |
         -----    |   |          |   |    |   |    |   |
                  -----          -----    -----    -----

【问题讨论】：

很难理解你想要什么。尝试改写它也许。据我所知，您有 3 个 div，您想将它们的 height 设置为它们中最高的相同值，仅使用 CSS，是这样吗？
没错！我很抱歉我的解释能力:)
如果你知道哪一个最高，你就可以这样做......否则它需要容器有一个大小并且内部元素是 100%。
How do I achieve equal height divs with HTML / CSS? 的可能重复项

标签： html css

【解决方案1】：

使用 CSS，您可以将内部 div 设置为 display: table-cell，将外部 div 设置为 display: table

演示：http://jsfiddle.net/maniator/C2dNu/

HTML：

<div id='out'>
    <div class='red'></div>
    <div class='blue'></div>
    <div class='green'></div>
</div>

CSS：

.red { 
    background: red;
    height: 60px;
}
.blue { 
    background: blue;
    height: 160px; 
}
.green {
    background: green;
    height: 80px; 
}
#out {
    display: table;
    width: 500px;
}

#out > div {
    display: table-cell;
    width: 33%;
}

【讨论】：

+1 - 你在我还在写fiddle 的时候回答了。 :D
谢谢@insertusernamehere ^_^
您不能使用margin，因为表格单元格没有边距概念。您可以在父元素上使用border-spacing 来实现单元格之间的“边距”。
@HalilIbrahim 你可以用边框来实现它：jsfiddle.net/maniator/C2dNu/1
花式橙色 @insertusernamehere :-P

【解决方案2】：

使用 JS 可以使用Equalize.js 完成。不过我不知道纯 CSS 解决方案。

【讨论】：

感谢您的回答，但我想知道它是否可以使用纯 css。如果不是，我应该使用这个库
@Neal "Pure CSS"，完全错过了。谢谢。
我想这是因为，即使是标记为 javascript 的问题，OP 也在寻找仅 CSS 的解决方案。
@insertusernamehere 确实，我在关注标签 :)
@Arda 我没有投反对票，但是当有人问一个 javascript 问题而每个人都用 jQuery 回答时，情况是一样的。我保证他们都会投反对票。您应该只使用标签中包含的语言回答问题。