Html 如何使用CSS在没有垂直空格的情况下垂直对齐内联块div？

我有一个特殊的问题，我正试图解决使用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>

结果如下所示：

<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>

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

以下是此场景的JSFIDLE：

---

有人能帮忙吗？提前谢谢。

我一直在摆弄，这是我最好的照片：

并使用jQuery魔术使黄色框中的文本围绕蓝色框流动：

---

这很难，需要一些疯狂的技巧。据我所知，你必须将蓝色div分成两到三部分（其中一部分必须是黄色div的孩子）。这可以接受吗？如果你不反对使用jQuery，你可能想看看。你可以将

#box1

和

#box2

更改为

#box1{背景色：红色；宽度：250px；位置：固定；顶部：0px；左侧：0px；

和

#box2{背景色：蓝色；宽度：100px；位置：固定；顶部：0px；左侧：250px；}

并将其相应对齐。不确定它的效率有多高，但它似乎与Safari一起工作，除了黄色框中的文本没有围绕蓝色框的形状流动。@ptriek-我刚刚在IE8中尝试了你的解决方案，但效果不太好。我说我不需要它在下面的IE7中工作，但我需要它在IE8中工作。我试着修好它，但运气不好。你能看一下吗？这样你的小提琴也能在IE8中使用吗？@ptriek对不起，当时我打开了更多的IEs，我误以为我有IE8，但它是IE7。很抱歉你是对的，它在IE8中运行良好。