我想这个问题可能已经被问过很多次了，但我已经在整个论坛中进行了搜索，但没有找到这个案例的答案。
我有一些 div“容器”和一些 div“元素”，它们都是 float 元素，我希望每个“容器”都位于前一个“容器”之下。
我知道我可以在不在容器上使用 float 的情况下实现这一点。但我认为使用 :after 和 clear: 就足够了。
为什么这不起作用？
我的代码:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style2.css">
</head>
<body>
<header></header>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
我的 CSS:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
min-height: 25px;
background-color: #444;
position: fixed;
overflow: auto;
}
.container {
float: left;
padding: 10px;
margin: 10px;
}
.container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.item {
min-width: 50px;
min-height: 50px;
float: left;
background-color: lightblue;
border: 1px solid red;
margin: 5px;
}
谢谢
最佳答案
只需将 clear:left 添加到您的 .container 规则中
.container {
clear:left;
float: left;
padding: 10px;
margin: 10px;
}
关于html - CSS float 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23346627/