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

【问题标题】：How to vertically align inline-block divs without vertical spaces using CSS?如何使用 CSS 垂直对齐没有垂直空格的内联块 div？
【发布时间】：2012-01-12 03:51:50
【问题描述】：

我有一个特殊的问题，我正在尝试使用 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/

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

【问题讨论】：

这非常困难，需要一些疯狂的技巧。据我所知，您必须将蓝色 div 分成两到三部分（其中一个必须是黄色部分的孩子）。这可以接受吗？
如果您不反对使用 jQuery，可能需要查看 Masonry。
您可以将 #box1 和 #box2 更改为 #box1 { background-color:red;width:250px;position:fixed;top:0px;left:0px; } 和 #box2 { background-color:blue;width:100px;position:fixed;top:0px;left:250px;} 并相应地对齐它们。不确定它的效率如何，但它似乎可以与 Safari 一起使用

标签： html css layout vertical-alignment

【解决方案1】：

我一直在摆弄，这是我最好的选择：

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

加上一点 jQuery 魔法，让黄色框中的文本围绕蓝色框流动：

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

【讨论】：

除了黄色方框中的文字没有围绕蓝色方框的形状流动。
@ptriek - 我刚刚也在 IE8 中尝试过您的解决方案，但看起来不太好。我说我不需要它在下面的IE7中工作，但我需要它在IE8中工作。我试图自己修复它，但没有运气。你能看看它，这样你的小提琴也能在 IE8 中工作吗？
@ptriek 对不起，我当时打开了更多的 IE，我错误地认为我有 IE8，但它是 IE7。对不起。你是对的，它在 IE8 中运行良好。