用包装文本打破的合理内联Div方法

Question

在下面的小提琴中，我有合理的，等间距的div，它们随窗口大小动态增长/缩小。一切都很好，直到你给其中一个div添加足够的文本，并导致它包装。在下面的小提琴中，取消注释以查看效果。

http://jsfiddle.net/jspyx21z/1/

这是视觉效果的基本概念。没有太多文字：

|Hello--------|    |Hello--------|
|-------------|    |-------------|
|-------------|    |-------------|
|-------------|    |-------------|
|-------------|    |-------------|

但是当添加文字时：

|Hello How are|
|you doing?---|    |Hello--------|
|-------------|    |-------------|
|-------------|    |-------------|
|-------------|    |-------------|
                   |-------------|

右边的方框下拉。

对我来说重要的行为是盒子必须：

• 随着窗户的增长和收缩，达到最大值最小高度。
• 如果窗口太小，请将其打包
• 在这种情况下，Flexbox不是一个选项。虽然我喜欢新的CSS选项，但这需要与IE9兼容。理想情况下，IE8。如果我们能让IE7工作，那就超级超级。
• 请，没有图书馆

任何人都可以解释为什么会这样，并且可能提供一些有关如何修复它的见解？三江源！

Answer 1

您需要在CSS中添加以下样式：

.box_fourth {
     vertical-align: top;
}

<强> DEMO