Просмотров: 8 159

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

02019055_cover-pdf-kniga-nina-komolova-komputernaya-verstka-i-dizayn-samouchitel    css3 cover_OUT.indd    09450331_cover-pdf-kniga-devid-soyer-makfarland-bolshaya-kniga-css3-2

  • Екатерина

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

  • Slava

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

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

    Спасибо.

  • Vzhik

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

  • http://oobooi.ru YOgen

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

    • admin

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