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

Question

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

我不想使用最大高度，因为它在未来不是动态的。

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/