Содержание страницы
Age-Dragon.com
Главная / Элементы html и css / Блоки div по горизонтали

Как сделать блоки div по горизонтали

блоки div по горизонталиОчень часто при вёрстке сайта появляется необходимость прописать блоки div по горизонтали, или по-иному сделать блоки div в ряд.

Это делается просто и для осуществления мы внедрим для блоков нужные параметры в css, которые и сделают наши блоки div в одну строку.
Для решения задачи как сделать блоки div по горизонтали мы рассмотрим примеры с парой вариантов, где каждый из вас выберет для себя подходящий.

Первый вариант блоки div по горизонтали.

Здесь мы будем использовать для выравнивания по горизонтали div, как в прочем и для других html элементов, параметр display со значением inline-block. То есть расположим наши блоки в ряд друг за другом.

Чтобы расположение блоков было очевидным, я прописал для них рамку из точек и придал им разный цвет.

Допустим, мы имеем 3 блока с некой текстовой информацией разной величины в каждом из них и нам необходимо расположить эти блоки в один ряд таким образом, чтобы при любом разрешение экрана ( даже самого маленького ) наши div находились строго в одной строке.
Для этого создадим родительский контейнер <div class="my_boks"> и поместим туда три наших блока:
1 Блок
2 Блок
3 Блок

<style>
div { box-sizing: border-box; }
.my_boks {
    position: relative;
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
.my_boks1, .my_boks2, .my_boks3 {
	margin: 10px;
	padding: 20px 10px;
	width: calc(33% - 24px);
	display: inline-block;
}
.my_boks1 { background-color: #f9aaaa; border: 3px dotted #f86565; }
.my_boks2 { background-color: #b1eab1; border: 3px dotted #61bd62; }
.my_boks3 { background-color: #bebee9; border: 3px dotted #616fbd; }
</style>

<div class="my_boks">
  <div class="my_boks1">1 Блок</div>
  <div class="my_boks2">2 Блок</div>
  <div class="my_boks3">3 Блок</div>
</div>

В этом примере я каждому блоку из 3 задал ширину width по 33%, и тем самым они будут располагаться в один ряд при любом раскладе.

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

Описание прописанных значений для DIV

  • width: calc(33% - 24px); - когда задаётся внешний отступ margin, то браузер приплюсовывает это значение к указанной ширине и соответственно ширина блока по факту станет уже больше прописанной. Для этого мы и используем эту конструкцию записи: отнимаем от заявленной ширины суммарное значение внешнего отступа по горизонтали.;
  • display: inline-block; - выравниваем блоки в один ряд друг за другом;
  • box-sizing: border-box; - при этом значение учитывается вся ширина блока ( padding + border ). Старайтесь ставить это значение для всех блоков DIV и не промахнётесь.

Второй вариант: блоки div в один ряд.

Давайте теперь рассмотрим ситуацию, когда мы хотим поставить все блоки DIV по горизонтали без указания ширины width, например, когда делаем горизонтальное меню.


1 Блок 2 Блок 3 Блок 4 Блок


<style>
a.my_boks01, a.my_boks02, a.my_boks03, a.my_boks04 {
	margin: 5px;
	padding: 10px 20px;
	display: inline-block;
	border: 1px solid #900000;
	box-sizing: border-box;
}
</style>

<a class="my_boks01" href="#">1 Блок</a>
<a class="my_boks02" href="#">2 Блок</a>
<a class="my_boks03" href="#">3 Блок</a>
<a class="my_boks04" href="#">4 Блок</a>



А в этом варианте мы рассмотрим конкретный пример, когда каждый блок имеет разную по длине текстовую информацию, и нам нужно выровнить эти все блоки между собой по горизонтали по верхней оси, нижней оси или по центру.

Для решения этой задачи на нужно внедрить одно css правило:
vertical-align: top | middle | bottom;
И в данном примере блоки div выровнены по верхней оси, то есть использовано значение top.

1 Общий блок
какая-то запись
2 Блок
3 Мой блок
Что-то написано
и ещё что-то
4 Блок

<style>
div.my_boks01,div.my_boks02,div.my_boks03,div.my_boks04 {
	margin: 20px 5px;
	padding: 10px 20px;
	display: inline-block;
	border: 1px solid #999;
	box-sizing: border-box;
	vertical-align: top;
}
</style>

<div class="my_boks01">1 Общий блок<br>какая-то запись</div>
<div class="my_boks02">2 Блок</div>
<div class="my_boks03">3 Мой блок<br>Что-то написано<br>и ещё что-то</div>
<div class="my_boks04">4 Блок</div>

Чтобы выровнить данные блоки по центру нужно в параметре vertical-align: заменить значение top на middle, и на bottom если желаете выровнить по нижней оси.
Комментарии
smsДобавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!