Просмотров: 10 994

Запретить перенос блоков друг под друга, когда им присвоено свойсто float.

Задача:

Имеем три блока div, которым присвоено свойство float со значением left.

<div style="float:left; width:300px; height:300px; background:#093">Блок 1</div>
 <div style="float:left; width:300px; height:300px; background:#C60">Блок 2</div>
 <div style="float:left; width:300px; height:300px; background:#F69">Блок 3</div>

Эти блоки обтекают друг друга и выстраиваются в одну линию.

01-05-2013 15-02-04

Но, если теперь начинать сужать окно браузера, то один блок переносится под другой, когда ему не хватает места в окне. Поэтому такие элементы (со свойством float) называют плавающими.

01-05-2013 15-02-23

Но, что делать, если мы не хотим, чтобы эти блоки смещались друг под друга?

Прежде чем мы начнем, хочу сразу сказать, если вы не хотите разбираться во всех технических тонкостях работы с технологией CSS сами, можете обратиться ко мне на почту webgyry@gmail.com.

Я оказываю услуги в этой области. Если что-то не работает или неправильно отображается, без проблем, подправим. Обратившись, вы можете сэкономить часы и даже дни своего свободного времени.

Решение здесь довольно простое. Нужно переназначить родителя для этих блоков и назначить ему фиксированную ширину.

По умолчанию, родителем для них является элемент body с шириной width:auto. Когда мы изменяли ширину окна браузера, изменялась и ширина элемента body.

Float работает следующим образом: если элементу с float не хватает места в родительском элементе, он переносится на новую строку. Это у нас и происходило.

Стоит только добавить новый родительский элемент с фиксированной шириной, как все встает на свои места:

<div style="width:1000px;">
 <div style="float:left; width:300px; height:300px; background:#093">Блок 1</div>
 <div style="float:left; width:300px; height:300px; background:#C60">Блок 2</div>
 <div style="float:left; width:300px; height:300px; background:#F69">Блок 3</div>
</div>

Теперь, сколько бы мы не изменяли ширину окна браузера, блоки с float будут находиться на одной линии.

01-05-2013 15-21-13

Будет только появляться горизонтальная полоса прокрутки.

Кстати, если вам будет интересно, я занимаюсь веб-аналитикой сайтов. Если вы хотели бы сделать ваш сайт более эффективным и, чтобы он приносил больше денег, веб-аналитика может в этом помочь.

Обучающий курс для начинающих по основам работы с веб-аналитикой сайтов на системе Яндекс Метрика здесь.

Страница с описанием моих услуг по веб-аналитике: здесь.

  • Екатерина

    Правильно делаете, что подробно все описываете, не все продвинутые в этих делах есть и те что учатся, спасибо Дмитрий за ваши урок

  • Slava

    Искал час как это сделать. Классный урок!

  • http://revived-craft.ru Максим

    Спасибо.

  • Vzhik

    Как достали «гуру» от программирования — все они знают, все для них мелко и неинтересно, будто родились они с мануалом в руках.
    Таких умников не слушайте. Ваш пост будет интересен многим. Удачи.

  • http://oobooi.ru YOgen

    А как сделать то же самое только без указания ширины родителя?

    • admin

      Без указания ширины скорее всего не получиться решить проблему. Я не знаю такого способа.