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

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

CSS:

HTML:

1.
2.
3.
4.
5.
6.
7.

widget3以某种方式创建了不可用的空间，因此widget4到6相距甚远，通常看起来很奇怪

你可以明白我在这里的意思：

---

我希望将红色框向上推以使用空白。

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

您可以创建一个包含1、2、4、5、6的容器div，然后在其旁边放置3。您可能需要使用插件：float:right是否有帮助@哇，太棒了！非常感谢你！

#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;
}

<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>