Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как правильно использовать float и clear 
:(
    Опции темы
Rusman
Дата 28.4.2014, 11:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 4.5.2006
Где: Пермь

Репутация: нет
Всего: нет



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

<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-ы, как правильно поступить в таком случае? 

Спасибо!
PM MAIL ICQ Skype   Вверх
Aliance
Дата 28.4.2014, 14:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137



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

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

В любом случае, clear нужно ставить на том же уровне, что и float`ы, в данном случае в блоке items (а не после).
PM MAIL WWW ICQ Skype   Вверх
Rusman
Дата 30.4.2014, 13:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 4.5.2006
Где: Пермь

Репутация: нет
Всего: нет



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;
}


Текст уходит в самый низ.
PM MAIL ICQ Skype   Вверх
Aliance
Дата 30.4.2014, 14:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137



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

Статья по теме.
PM MAIL WWW ICQ Skype   Вверх
Rusman
Дата 30.4.2014, 17:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 312
Регистрация: 4.5.2006
Где: Пермь

Репутация: нет
Всего: нет



Aliance, ага спасибо! Сработало )
PM MAIL ICQ Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0495 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.