html - 将元素的高度值设置为纯CSS行中的最大值

Question

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

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

Answer 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%;
}