Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как правильно использовать float и clear

Автор: Rusman 28.4.2014, 11:38

Здравствуйте!
К примеру, есть две колонки. В правой колонке размещаю вывод товаров блоками:

Код


<div class="cols">
<div class="colLeft"></div>
<div class="colRight">
        <div class="items">
            <div class="item">Товар 1 слева</div>
            <div class="item">Товар 2 справа</div>
            <div class="item">Товар 3 слева</div>
            <div class="item">Товар 4 справа</div>
        </div>
        <div class="text">Текст Текст Текст</div>
</div>
</div>

Далее делаем такой код левой колонке указывает float: left, и item также float left, чтобы они друг за другом шли боками:

Код


.colLeft {
    float: left;
    width: 286px;
}
.colRight {
    padding-left: 306px;
}
.items .item {
   float: left;
   width: 350px;
}

Проблема в том, что если у нас 4 товара, то все хорошо и текст размещается нормально после всех блоков с товарами, но если у нас нечетное кол-во товаров, то текст встает на место 4 товара, т.е. обтекает 3 товар. Вроде бы решение такое, добавить claer: left;
Добавляю после закрытия <div class="items"> блок <div style="clear: left;"></div>
В этом случае у меня весь текст сползает в самый низ, где заканчивается левый блок, если он длиньше правого.
Я так понимаю, это отменяются все float-ы, как правильно поступить в таком случае?

Спасибо!

Автор: Aliance 28.4.2014, 14:35

Вот что получается в результате приведенного выше кода: http://jsfiddle.net/Aliance/MdSPm/

Что-то мне кажется что это явно не то, что должно быть. Поэтому до конца не понятна задача. Просьба подправить код, либо подтвердить его корректность.

В любом случае, clear нужно ставить на том же уровне, что и float`ы, в данном случае в блоке items (а не после).

Автор: Rusman 30.4.2014, 13:59

Aliance, подправил, можете посмотреть результат как отображается:
Код:

Код


<div class="cols">
    <div class="colLeft">
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
        Левая колонка<br>
    </div>
    <div class="colRight">
        <div class="items">
            <div class="item">Товар 1 слева</div>
            <div class="item">Товар 2 справа</div>
            <div class="item">Товар 3 слева</div>
            <div class="item">Товар 4 справа</div>
            <div class="item">Товар 5 слева</div>
            <div class="clear"></div>
        </div>
        <div class="text">Текст Текст Текст</div>
    </div>
</div>

Код


.colLeft {
    float: left;
    width: 100px;
}
.colRight {
    padding-left: 110px;
    width: 410px;
}
.items .item {
   float: left;
   width: 200px;
}
.clear {
    clear: left;
}

Текст уходит в самый низ.

Автор: Aliance 30.4.2014, 14:49

Если добавить float:left у элементу .items, тогда это решит проблему?

http://www.xiper.net/collect/html-and-css-tricks/css-tricks/clearfix.html.

Автор: Rusman 30.4.2014, 17:05

Aliance, ага спасибо! Сработало )