Css 在3列布局中间的清晰元素 A有三列布局，我想在中间列中有三个div，但是每当我在边栏中的内容比中间div中的内容“长”时，框就跳到“最长div”下。这是我的密码： <div style="float: left; width: 15%; background-color: yellow;"> <p>left</p> <p>left</p> <p>left</p> </div> <div style="float: right; width: 15%; background-color: pink;"> <p>right</p> <p>right</p> <p>right</p> <p>right</p> </div> <div style="margin-left: 20%; margin-right: 20%;"> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div> <div style="clear: both;"></div> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div> <div style="clear: both;"></div> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div> <div style="float: left; width: 20%; background-color: blue; margin: 1%"> middle </div>

左

左

左

对

对

对

对

中间的 中间的 中间的 中间的 中间的 中间的 中间的 中间的 中间的 ​

下面是代码，以便更好地理解。如果有人能给我解释一下“清理”我会很高兴的

编辑：

---

我遵循了本教程，这是因为以下内容，每三个div后面都有

<div style="clear: both;"></div>

清除用于将元素放在浮动的任何对象的正下方。使用clear：两者都有；意味着它将清除向左或向右浮动的任何内容

---

快速修复方法是删除这些元素，并将中间列中每个div的宽度增加到30%，然后将第四个div强制到下一行。

您的中间div显示为块级元素，这就是为什么要与侧边栏div的内容一起推。将其向左浮动，并为其添加适当的宽度以解决问题。中间分区宽度=20%+20%边距+15%+15%侧边栏宽度=70%+30%中间分区=100%

---

好的，我明白了。我只是认为这是正确的方法（添加了我遵循的教程），但正如我所看到的，当存在其他浮动元素时，它不起作用。谢谢你的回答。本教程之所以有效，是因为它们本身就是列，然后被拆分成行。同样的高度也很容易，但是柱中柱是一件痛苦的事！