javascript - 相同高度盒子的优雅解决方案

Question

我有三个连续的盒子，每个盒子都有不同的内容。他们的高度不一样。是否有一个优雅的解决方案，不涉及绝对定位来动态地在每个盒子上产生相同的高度

我不想使用 max-height，因为它对于 future 来说不是动态的。

Answer 1

如果您仅针对现代浏览器，解决此问题的最优雅的方法是使用 flexbox。例如:

<div style='display: flex; flex-direction: row; color: #fff;'>
    <div style='flex: 1; background:red;'>
        <p>Hi</p>
    </div>
    <div style='flex: 1; background:green'>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
    </div>
     <div style='flex: 1; background:blue'>
        <p>Hi</p>
    </div>
</div>

http://jsfiddle.net/nofmdho4/1/