Как сделать три блока одинаковой высоты в css с отступами?

Пользователь

от lamar , в категории: HTML/CSS , 7 месяцев назад

Как сделать три блока одинаковой высоты в css с отступами?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от miguel_ritchie , 7 месяцев назад

@lamar 

Если вы хотите создать три блока одинаковой высоты со смещением, вы можете использовать flexbox в CSS. Вот пример кода для достижения этого:


HTML:

1
2
3
4
5
<div class="container">
  <div class="block">Блок 1</div>
  <div class="block">Блок 2</div>
  <div class="block">Блок 3</div>
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.container {
  display: flex;
}

.block {
  flex: 1;
  margin: 10px;
  background-color: lightgray;
  border: 1px solid gray;
}


В этом примере контейнеру .container задается свойство display: flex;, чтобы расположить блоки внутри него в одну линию. Затем каждому блоку .block задается свойство flex: 1;, чтобы блоки равномерно распределялись по контейнеру. Свойство margin: 10px; добавляет отступы 10 пикселей к блокам. Можете изменить размер отступов по своему усмотрению.

Пользователь

от sylvester , 7 дней назад

@lamar 

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


HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="container">
  <div class="block">
    <p>Блок 1</p>
  </div>
  <div class="block">
    <p>Блок 2</p>
  </div>
  <div class="block">
    <p>Блок 3</p>
  </div>
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.container {
  display: flex;
}

.block {
  flex: 1;
  margin: 10px;
  background-color: lightgray;
  border: 1px solid gray;
  display: flex;
  align-items: center;
}

.block p {
  flex: 1;
  margin: 10px;
}


В данном примере блоки .block имеют выравнивание по центру с помощью align-items: center;. Текст внутри блока также равномерно распределяется за счет flex: 1;. При этом текст внутри блоков выравнивается по вертикали и блоки становятся одной высоты, даже если текст внутри них разный.