Расположение блоков div по горизонтали: html — Как выстроить блоки друг за другом, не зависимо от их количества в строке?

Leave a Comment / Разное / By /

Как разместить два слоя с заданной шириной рядом по горизонтали?

Тема:Вёрстка

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Разместить рядом по горизонтали два блочных элемента фиксированной ширины.

Решение

Слой, создаваемый через тег <div>, является блочным элементом веб-страницы. Это означает, что по ширине слой занимает все доступное пространство и всегда начинается с новой строки. Поэтому ограничение ширины слоев никак не приведет к тому, что блоки станут располагаться рядом. Для нашей цели следует воспользоваться стилевым свойством float со значением left. Это свойство превращает блочный элемент в плавающий, что в свою очередь приводит к выравниванию слоя по левому краю и его обтеканию другими элементами по правому краю. На деле же слои при подобной манипуляции выстраиваются не друг под другом как обычно, а рядом по горизонтали. Но только в том случае, когда ширина слоев задана через свойство width, как показано в примере 1.

Пример 1. Слои заданной ширины

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Слои по горизонтали</title>
  <style>
   .layer1 {
    background-color: #fc0; /* Цвет фона слоя */
    padding: 5px; /* Поля вокруг текста */
    float: left; /* Обтекание по правому краю */
    width: 200px; /* Ширина слоя */
   }
   .layer2 {
    background-color: #c0c0c0; /* Цвет фона слоя */
    padding: 5px; /* Поля вокруг текста */
    width: 300px; /* Ширина слоя */
    float: left; /* Обтекание по правому краю */
   }
   .clear {
    clear: left; /* Отмена обтекания */
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh  
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div>
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit  
    lobortis nisl ut aliquip ex ea commodo consequat.
 
  Duis te feugifacilisi. 
  </div>
  <div></div>
   <p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate 
   velit esse molestie consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Слои, располагающиеся по горизонтали с помощью float

Данный пример работает только для слоев, у которых ширина задана явно в процентах или пикселах через свойство width. Чтобы обтекание не распространялось дальше на последующие элементы, необходимо применить свойство clear, оно отменяет действие float. В примере для этой цели создается «пустой» элемент <div>.

При уменьшении размеров окна браузера до определенной величины, слои сверстанные по указанной методике перестают располагаться по горизонтали и «перескакивают» вниз друг под друга (рис. 2). Чтобы этого не происходило, воспользуйтесь стилевым свойством min-width.

Рис. 2. Сдвиг слоев при уменьшении окна браузера

вёрстка

HTML по теме

  • Тег <div>

CSS по теме

  • clear
  • float
  • min-width

Создание врезок

Врезкой называется блок с рисунками и текстом, который встраивается в основной текст.

Врезка обычно располагается по левому или правому краю текстового блока, а основной текст обтекает её с других сторон (рис. 3.34).

Рис. 3.34. Вид врезки

Чтобы врезка выделялась в тексте, у неё обычно устанавливают фоновый цвет и добавляют рамку. По своему виду врезки напоминают приведённый выше способ обтекания текстом картинки, поэтому код для создания врезок практически идентичен предыдущему (пример 3.23).

Пример 3.23. Добавление врезки

XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

<title>Врезка</title>

<style type=»text/css»>

. note {

float: right; /* Выравнивание по правому краю */

background: #F3F0E9; /* Цвет фона */

border: 1px solid #000; /* Параметры границы */

padding: 0 10px; /* Поля вокруг картинки */

margin: 5px 0 5px 10px; /* Отступы */

width: 120px; /* Ширина */

font-size: 0.9em; /* Размер шрифта */

}

.note P { margin: 0.6em 0; }

.note IMG {

vertical-align: middle; /* Выравнивание по центру строки */

}

</style>

</head

>

<body>

<div class=»note»>

<p><img src=»images/tool_magicerase.gif» width=»20″ height=»17″

alt=»Magic Erase» /> — инструмент Magic Erase.</p>

<p>По своему действию похож на инструмент Magic Wand, но в отличие от

него, не выделяет область, а стирает ее. </p>

</div>

<p>Инструмент Magic Erase (Волшебный ластик) стирает пикселы близкие по

цвету. Если мы работаем со слоем Background или со слоем, прозрачность

на котором заблокирована, пикселы заменятся на фоновый цвет. Во всех

остальных случаях мы получим прозрачную область.</p>

<p>Принцип работы с инструментом Magic Erase напоминает работу с

инструментом Magic Wand. А именно, вначале устанавливаем подходящее

значение Tolerance, включаем флажок Anti-aliased для создания плавных

границ, убираем флажок с параметра Contiguous для одновременного удаления

всего фона, после чего щелкаем по фотографии в районе неба. Если слой

Background был предварительно переименован, мы получим прозрачные

участки в нужных местах.</p>

</body>

</html>

При создании врезок следует обязательно указывать её ширину с помощью свойства width. Иначе размер слоя окажется гораздо шире, чем это требуется.

По умолчанию блочные элементы выстраиваются по вертикали один под другим, но при помощи свойства float их можно заставить располагаться рядом по горизонтали. При этом требуется установить ширину слоёв и задать для них float. Если ширина не указана, она будет равна содержимому слоя с учётом полей и границ. В примере 3.24 взят каталог товаров, созданный в предыдущем разделе с помощью строчно-блочных элементов, и переделан под использование float. Чтобы блоки были заметны, фон веб-страницы установлен серым.

Пример 3.24. Блоки по горизонтали

XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

<title>Каталог</title

>

<style type=»text/css»>

BODY {

font: 10pt Arial, Helvetica, sans-serif;

background: #f0f0f0; /* Цвет фона веб-страницы */

}

#catalog A { color: #666; }

#catalog A:hover { color: #1fa0e2; }

#catalog DIV {

width: 110px; /* Ширина */

background: #fff;

margin: 0 5px 15px 0; /* Отступы */

text-align: center; /* Выравнивание по центру */

float: left; /* Выравнивание по левому краю */

}

#catalog P { margin: 0 5px; }

#catalog SPAN { color: #ccc; font-size: 0. 8em; }

</style>

</head>

<body>

<div id=»catalog»>

<div>

<p><img src=»images/category4.jpg» alt=»» /></p>

<p><a href=»#»>Компьютеры и орг.техника</a> <span>4296</span></p>

</div>

<div>

<p><img src=»images/category3.jpg» alt=»» /></p>

<p><a href=»#»>Мобильные устройства</a> <span>2109</span></p>

</div>

<div>

<p><img src=»images/category2.

jpg» alt=»» /></p>

<p><a href=»#»>Фото</a> <span>315</span></p>

</div>

<div>

<p><img src=»images/category1.jpg» alt=»» /></p>

<p><a href=»#»>Видео</a> <span>1856</span></p>

</div>

</div>

</body>

</html>

Результат примера показан на рис. 3.35.

Рис. 3.35. Расположение слоев при использовании свойства float

Из-за разного текста в подписи высота блоков также получается разной, из-за чего некоторые блоки «цепляются» за другие и не переходят на другую строку. Здесь может помочь установка высоты всех блоков через свойство height, например 100px или возврат к использованиюdisplay: inline-block.

css — Как расположить три div в html по горизонтали?

спросил

Изменено 10 месяцев назад

Просмотрено 249 тысяч раз

Я создаю образец веб-сайта с тремя разделами по горизонтали. Я хочу, чтобы самый левый div имел ширину 25%, средний — ширину 50%, а правый — ширину 25%, чтобы деления заполняли все 100% пространства по горизонтали.

 
    <название>
    Название веб-сайта
    
    <дел >
        <дел>
            Левое боковое меню
<дел> Случайный контент
<дел> Правое боковое меню