html - 在行中 float div 后填充空白

Question

我在第一个“行”上有 3 个 float div，前两个 div 的高度为 100px，第三个 div 的高度为 200px。我在第一行之后添加的任何内容都不会填充从第三个 div 创建的空白。

CSS:

#container {
    overflow: hidden;
    width: 440px;
    margin: -5px;
}

#container div {
    background-color: gray;
    height: 100px;
    width: 100px;
    margin: 5px;
    float: left;
}

#container #widget2 {
    width: 210px;
}

#container #widget3 {
    height: 200px;
}

HTML:

<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2</div>
    <div id="widget3">3</div>
    <div id="widget4">4</div>
    <div id="widget5">5</div>
    <div id="widget6">6</div>
    <div id="widget7">7</div>
</div>

widget3 以某种方式创建了无法使用的空间，因此 widget4 到 6 距离很远，通常看起来很奇怪。

你可以在这里明白我的意思:http://jsfiddle.net/SGdG3/80/

我希望将红色框“推”上去以使用空白区域。

Answer 1

基本上这就是 float 元素的行为方式。如果你想填充空间，那么你必须使用 Javascript 进行绝对定位。这是适合您的解决方案的漂亮 JQuery 插件。