Div в ряд по горизонтали – Как расположить 3 div по центру родительского div, да еще и сохранить адаптивность?

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

Содержание

Как расположить несколько блоков в ряд — сайт на PHP своими руками

Как расположить несколько блоков div в ряд? Как запретить обтекание блоков <div>?

Очень часто приходится расположить несколько блоков <div> в однин ряд в горизонтальной плоскости. Например один блок <div> слева, а другой справа и чтобы они были в одном потоке чтения браузером. Или при выводе изображений из базы данных, например аватаров, нужно чтобы картинки были все в один ряд. Или при создании горизонтального меню, нужно пункты расположить в ряд. Одним словом — нужно позиционировать блоки <div>.

Делается это очень просто, при помощи параметра float:…;, которым будем задавать обтекание блока справа, или слева, кому что нужно. Один важный момент — при таком позиционировании нескольких блоков <div>, нужно чтобы общая ширина страницы была больше суммы ширины блоков, иначе блоки будут один под другим, хотя и с разных сторон окна!!!

Как запретить обтекание блоков <div>

При позиционировании блоков, часто случается так, если разрешено обтекание, то текст может подскакивать вверх, или между блоками смещаться. Решается такая проблема созданием блока с запретом обтекания со всех сторон. Такой

div нужно сделать размером по высоте в 1 пиксель и ширине 100%.

.

И при надобности, такими пустыми блоками DIV можно запретить обтекание всех внутренних блоков, сверху и снизу, которые нужно расположить в ряд.

Пример горизонтального расположения нескольких блоков <div>

Для такого расположения блоков — всем div-ам присваиваем параметр float:left; и радуемся жизни! Для примера раположим несколько блоков <div> по горизонтали:

DIV — 1

DIV — 2

DIV- 3

DIV — 4

DIV — 5

DIV — 6


——- установим стили блока DIV ———
#liniya {
width:110px;
height:50px;
background:#669900;
float:left;
margin-left:15px;
text-align:center;

}
———- вставим блоки на страницу ———

.

чтобы не лезли вверх

DIV — 1

DIV — 2

DIV- 3

DIV — 4

DIV — 5

DIV — 6

чтобы ничего не влезало снизу

Если нужно расположить два больших блока в один ряд, тогда нужно параметрам float:…; задать значения left для одного и right для другого. Очень важно, чтобы общая ширина блоков не превышала ширину страницы, иначе ничего не получиться и один блок сместиться в нужную сторону, но располагаться будет под соседним!!!

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

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 в ряд

Stack Overflow на русском

Loading…

  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте

Урок: блоки в одну строку CSS

Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет «родительским» по отношению к этой группе.

Группа блоков внутри родительского блока:

<div>

<div>Текст текст текст текст текст текст</div>

<div>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</div>

<div>Тексттекст текст текст текст текст текст текст текст текст текст текст текст текст</div>

<div>Тексттекст текст текст</div>

</div>

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

Так как для дочерних блоков 100% ширины — это вся ширина родительского блока. Из этого следует, что для получения максимальной ширины дочернего блока, при расположении блоки в одну строку, надо воспользоваться формулой: 100 / 4 = 25, где 100 — это ширина родительского блока, а 4 — количество дочерних. Получается, что каждый блок должен быть не шире 25%, чтобы расположить блоки на одной строке.

Так как между блоками должно быть расстояние, чтобы они не «слипались», то необходимо рассчитать ширину отступа между блоками.

Количество отступов между блоками меньше количество самих блоков на единицу, то есть в данном случае отступов будет 3.

Если взять отступ равный 2%, то получится, что ширина каждого блока должна быть 23,5%: 4 * 23,5 + 3 * 2 = 100. Получается, что сумма всех ширин, включая отступы, по прежнему составляет 100%, как и должно быть.

CSS определяющий ширину блока и отступ справа:

.parent > div {

    background: #eee;

    float: left;

    width: 23.5%;

    margin-right: 2%;

}

Данный код означает следующее: все блоки DIV, являющиеся первым вложением в блок с классом parent должны обладать следующими свойствами: Цвет фона — серый, ширина блока — 23,5%, внешний отступ справа — 2% и размещение блока — слева.

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

Обнуление отступа для последнего дочернего элемента группы:

.parent > div:last-child {

    margin-right: 0;

}

Теперь отступы будут иметь все дочерние блоки, кроме последнего.

Если в каждом блоке написать какой-либо текст, то он прилипнет к границам блока, что не очень красиво, следовательно нужно сделать внутренний отступ, например равный 10px, а для того, чтобы подчеркнуть, что блоки являются отдельными, нарисуем им границы.

CSS примет следующий вид:

.parent > div {

    background: #eee;

    float: left;

    width: 23.5%;

    margin-right: 2%;

    padding: 10px;

    border: 1px solid #ccc;

}

В этом случае блоки в одну строку снова перестанут умещаться, так как по умолчанию внутренние отступы и границы влияют на ширину блока увеличивая ее. То есть если блок имел ширину 23,5%, то после нововведений он будет иметь ширину  23,5% + 2 * 10 + 2 * 1 — ширина самого блока плюс ширина отступа с каждой стороны, плюс ширина рамки с каждой стороны. Чтобы ширина блока считалась с учетом внутренних отступов и рамок необходимо использовать свойство box-sizing.

CSS с указанием, что ширина блока должна учитывать внутренние отступы и границы:

.parent > div {

    background: #eee;

    float: left;

    width: 23.5%;

    margin-right: 2%;

    padding: 10px;

    border: 1px solid #ccc;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

Результат — блоки в одну строку:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *