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

Posted 2023-03-05

【中文标题】如何使用 CSS 垂直对齐没有垂直空格的内联块 div？

【英文标题】：How to vertically align inline-block divs without vertical spaces using CSS?

【发布时间】：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 一起使用

【参考方案1】：

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

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

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

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

【讨论】：

除了黄色方框中的文字没有围绕蓝色方框的形状流动。

@ptriek - 我刚刚也在 IE8 中尝试过您的解决方案，但看起来不太好。我说我不需要它在下面的IE7中工作，但我需要它在IE8中工作。我试图自己修复它，但没有运气。你能看看它，这样你的小提琴也能在 IE8 中工作吗？

@ptriek 对不起，我当时打开了更多的 IE，我错误地认为我有 IE8，但它是 IE7。对不起。你是对的，它在 IE8 中运行良好。