Я предполагаю, что это, возможно, задавали много раз, но я искал на форуме и не нашел ответа на этот случай.
У меня есть divs "container", а некоторые divs "item" все из них содержат элементы, и я хочу, чтобы каждый "контейнер" был ниже предыдущего.
Я знаю, что могу достичь этого, не используя поплавки на контейнерах. Но я подумал, что использовать :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
to your .container
rules
.container {
clear:left;
float: left;
padding: 10px;
margin: 10px;
}
Вы можете использовать clearfix подход, добавив класс.clearfix своего .container диву:
.clearfix:before,
.clearfix:after{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
<div class="container clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
При таком подходе вам не нужно плавать: оставил ваш .container, а также Clearfix, чтобы он помогал вам каждый раз, когда div плавал дочерние элементы, делая его переменной высоты в соответствии с ее дочерними элементами.
Другой подход добавил бы ясное: оставлено вашему .container, но я не рекомендую его, поскольку это будет конкретное решение для решения.