如何使用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>
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/
有人可以帮忙吗？提前致谢。
I have special problem which I am trying to solve using CSS. My HTML layout is like this:
<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>
and CSS is this:
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 }
The result then looks like this:
But my desired result should look like this picture below. It's hard for me to describe it in words so I've just uploaded this graphic mock-up so you would get the idea what I want to achieve. Basically, the empty space between first and second row of boxes should disappeared and text in box #4 should "float" around box #2. I want only CSS solution if it is possible and it doesn't need to support IE7 and below:
Here is jsFiddle for this scenario: http://jsfiddle.net/HUxWZ/
Anybody can help please ? Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我已经摆弄了一下，这是我最好的镜头：
http://jsfiddle.net/HUxWZ/10/
并使用 jQuery 魔法使黄色框中的文本围绕蓝色框流动：
http://jsfiddle.net/HUxWZ/21/
I've been fiddling a bit, this is my best shot:
http://jsfiddle.net/HUxWZ/10/
And with a touch of jQuery magic to make the text in yellow box flow around the blue one:
http://jsfiddle.net/HUxWZ/21/