Просмотров: 17 439

Запретить перенос блоков друг под друга, когда им присвоено свойсто 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

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

Изучать CSS по статьям не лучшая идея.

Освойте хитрости и «подводные камни» CSS, чтобы легко вносить правки в оформление своего сайта.

Жмите сюда, чтобы перейти к полному списку моих курсов по CSS.

  • Селекторы, свойства, значения.
  • Строчная и блочная модель
  • Основы позиционирования элементов. Свойства position и float.
  • и др.