CSS Float элементы

0

Я предполагаю, что это, возможно, задавали много раз, но я искал на форуме и не нашел ответа на этот случай.

У меня есть 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;
}

спасибо

Теги:
css-float

2 ответа

2
Лучший ответ

Просто добавьте clear:left to your .container rules

.container {
    clear:left;
    float: left;
    padding: 10px;
    margin: 10px;
}

Пример jsFiddle

  • 0
    Увидев это, кажется таким очевидным ... Спасибо!
0

Вы можете использовать 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, но я не рекомендую его, поскольку это будет конкретное решение для решения.

  • 0
    Спасибо, я тоже попробую :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню