Question

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

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

基本上这就是Floated元素的行为方式。如果你想填补空间，那么你可以使用Javascript进行绝对定位。这是一个适用于您的解决方案的Beautiful JQuery插件。

在行中浮动的div之后填充空格

1 个答案: