CSS-divs-clear：无，左右浮动

以下是我的例子：

我正在编辑的网站片段如下： 如您所见，扩展左侧的div允许div在右侧浮动，扩展右侧的div不允许div在左侧浮动

我有不同高度的div，希望它们能够浮动到较大div的左侧和较大div的右侧

正如您在示例中所看到的，黄色div不会与右边的div保持一致（因为css是float:left；）

有没有一种方法可以“float:two；”

---

谢谢

你能试试这把小提琴吗

将它们排列成列确实是获得所需结果的最佳选择

#div1 { background-color:red; width:300px; height:100px; float:left; clear:none; }
#div2 { background-color:green; width:300px; height:50px; float:left; clear:none; }
#div3 { background-color:blue; width:300px; height:50px; float:left; clear:none; }
#div4 { background-color:cyan; width:300px; height:50px; float:left; clear:none; }
#div5 { background-color:magenta; width:300px; height:100px; float:left; clear:none; }
#div6 { background-color:yellow; width:300px; height:50px; float:left; clear:none; }

.col {background:none; width:300px; float:left;}

---

可能的重复我不明白想要的结果是什么。你能更清楚地说明这一点吗？如果你对javascript持开放态度，可能值得一看。我扩展了我的示例-这是一个有问题的网页片段，如果你扩展左侧的div，其他div会出现在右侧，但反之亦然！您可能想研究

使用flexbox实现类似砖石的效果
（）。我可以这样做，但是，它们都是可以在单击时扩展的div，我希望用户能够扩展一些div，并将其他div撞到左/右，这取决于间隙的位置。我认为，除非css3中有我不知道的内容，否则实际上不可能实现您想要的浮动div。您仍然可以通过列和javascript获得所需的功能。
#div1 { background-color:red; width:300px; height:100px; float:left; clear:none; }
#div2 { background-color:green; width:300px; height:50px; float:left; clear:none; }
#div3 { background-color:blue; width:300px; height:50px; float:left; clear:none; }
#div4 { background-color:cyan; width:300px; height:50px; float:left; clear:none; }
#div5 { background-color:magenta; width:300px; height:100px; float:left; clear:none; }
#div6 { background-color:yellow; width:300px; height:50px; float:left; clear:none; }

.col {background:none; width:300px; float:left;}