如何使用CSS垂直对齐没有垂直空格的内联块div？

Question

我有特殊问题，我试图用CSS解决。我的HTML布局是这样的：

<div id="body">
    <div id="box1">lorem ipsum...</div>
    <div id="box2">lorem ipsum...</div>
    <div id="box3">lorem ipsum...</div>
    <div id="box4">lorem ipsum...</div>
</div>

和CSS是这样的：

div { display:inline-block;vertical-align:top }
#body { width:400px;outline:1px solid #eee }
#box1 { background-color:red;width:250px; }
#box2 { background-color:blue;width:150px }
#box3 { background-color:green;width:150px }
#box4 { background-color:yellow;width:150px }

结果如下：

但我想要的结果应如下图所示。我很难用文字描述它，所以我刚刚上传了这个图形模型，这样你就可以了解我想要实现的目标。基本上，第一排和第二排盒子之间的空白空间应该消失，方框＃4中的文本应该在方框＃2周围“浮动”。我想只有CSS解决方案，如果有可能，它不需要支持IE7及以下：

以下是此方案的jsFiddle：http://jsfiddle.net/HUxWZ/

有人可以帮忙吗？提前谢谢。

Answer 1

我一直在摆弄，这是我最好的镜头：

http://jsfiddle.net/HUxWZ/10/

用一点jQuery魔法让黄色框中的文字围绕蓝色文字流动：

http://jsfiddle.net/HUxWZ/21/