Как сделать высоту блоков одинаковой

@frenchi · Регистрация: 15.11.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте, помогите выстроить блоки в нужной последовательности.
В основном блоке, с шириной 1280px, нужно вместить в ряд 3 блока, так чтобы ширина всех 3 блоков была одинакова а высота всех 3 блоков равнялась максимальной высоте одного из блоков. Я сделал при помощи float:left но высота всех блоков получается разная из-за разной информации внутри каждого блока. Пример на рисунке, красное как получается у меня, серое это что я хочу добиться. Спасибо.

@mrtoxas · 05.06.2016, 17:41

Результат

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper{
  width:1280px;
  border:1px solid #ccc;
  text-align:center;
  margin:20px auto;
}
.block{
  display:inline-block;
  width:33%;
  background:green;
  vertical-align:top;
  margin-bottom:5px;
 }

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
  <div class="block">Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
  <div class="block">Текст<br>Текст</div>
  <div class="block">Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
  <div class="block">Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
</div>

@frenchi · 05.06.2016, 19:30 **[ТС]**

Спасибо, но получается то же самое что у меня, высота у всех разная...

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
  <div class="block">Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
  <div class="block">Текст<br>Текст</div>
  <div class="block">Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
  <div class="block">Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
  <div class="block">Текст<br>Текст<br>Текст</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper{
  width:1280px;
  border:1px solid #ccc;
  text-align:center;
  margin:20px auto;
}
.block{
  display:inline-block;
  width:33%;
  background:green;
  vertical-align:top;
  margin-bottom:5px;
 }

http://cssdeck.com/labs/pnxcgdkv

@mrtoxas · 05.06.2016, 19:41

ааа, надо чтобы одинаковая была? перепутал

http://codepen.io/anon/pen/JKdxJL

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.table {
    display: table;
    width:1280px;
    border:1px solid black;
}
.row {
    display: table-row;
}
.cell {
    padding:5px;
    display:table-cell;
    border:1px solid #ccc;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="table">
  <div class="row">
    <div class="cell">Текст<br>Текст<br>Текст</div>
    <div class="cell">Текст<br>Текст</div>
    <div class="cell">Текст<br>Текст<br>Текст</div>
  </div>
  <div class="row">
    <div class="cell">Текст<br>Текст<br>Текст</div>
    <div class="cell">Текст<br>Текст<br>Текст</div>
    <div class="cell"Текст<br>Текст<br>Текст</div>
  </div>
  <div class="row">
    <div class="cell">Текст<br>Текст</div>
    <div class="cell">Текст<br>Текст<br>Текст</div>
    <div class="cell">Текст<br>Текст<br>Текст</div>
  </div>
</div>

@dzendev · 05.06.2016, 19:44

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            display: table;
            width: 1280px;
        }
        .wrap .row{
            display: table-row;
        }
        .wrap .block{
            display: table-cell;
            background: #1f0;
            width: 33.33333333%;
        }
    </style>
 
</head>
<body>
    <div class="wrap">
        <div class="row">
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, fuga!</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, ducimus.</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus nam perspiciatis suscipit rem quasi voluptates ratione odio ad tenetur repudiandae.</div>
        </div>
        <div class="row">
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, quam.</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, a, vel? Placeat repellat, temporibus reiciendis nesciunt voluptates reprehenderit quod! Accusamus sint nihil voluptates hic, amet temporibus ad id maxime vero.</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, neque!</div>
        </div>
        <div class="row">
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur mollitia quia quasi voluptate libero minus eum id illo architecto consequuntur.</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, alias.</div>
            <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, doloremque.</div>
        </div>
    </div>
</body>
</html>

Ай яй расхождение в 3 минуты

@frenchi · 05.06.2016, 20:49 **[ТС]**

Спасибо всем, всё хорошо но появилась ещё одна проблема. Как сделать отступы между ячейками таблицы?

@mrtoxas · 05.06.2016, 20:57

CSS
1
2
3
.table {
  border-spacing:2px; 
}

@anttoshka · 06.06.2016, 11:13

Если устраивает поддержка IE10+ используй Flexbox. Так же есть полифил для браузеров не поддерживающих флексбокс.

Комментарий модератора

Это хорошо, что Вы пытаетесь помочь форумчанам в решении их проблем, но старайтесь не так часто использовать ссылки на сторонние ресурсы!

@frenchi · 06.06.2016, 23:54 **[ТС]**

Спасибо за подсказку про флексбокс, сделал через него, всё супер! Только осталось решить ещё одну проблемку, нужно блок сделать ссылкой, если я делаю блок ссылкой то у меня не работает динамическое растягивание блока, если делаю ссылку внутри блока то ссылкой является только текст внутри блока.

@mrtoxas · 07.06.2016, 02:05

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrapper {
  display: flex;
  height: 100px;
}
.block {
  flex-grow:1;
}
a {
  display: block;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
  border: 1px solid black;
}

HTML5
1
2
3
4
5
<div class="wrapper">
   <div class="block">
      <a href="#">Ссылка в никуда</a>
  </div>
</div>

Или так:

CSS
1
2
3
4
5
6
7
8
9
10
11
.wrapper {
  display: flex;
  height: 100px;
}
a {
  flex-grow:1;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
  border: 1px solid black;
}

HTML5
1
2
3
<div class="wrapper">
      <a href="#">Ссылка в никуда</a>
</div>

@frenchi · 07.06.2016, 06:11 **[ТС]**

Спасибо за труд, но у меня высота блоков зависит от текста внутри блока соответственно и высота ссылки не может быть фиксированной

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.main_menu_cat .row_table
{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:stretch;
    flex-wrap:wrap;
}
.main_menu_cat .row
{
    width:400px;
    margin:5px;
    padding:5px 5px 5px 8px;
    background:#E4E4E4;
    border:1px solid #ccc;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="row_table">
    
    <div class="row" >
        <a href="">
            <h3>text</h3>
            <p>text text text</p>
        </a>
    </div>
    <div class="row" >
        <a href="">
            <h3>text</h3>
            <p>text text text</p>
        </a>
    </div>
    <div class="row" >
        <a href="">
            <h3>text</h3>
            <p>text text text</p>
        </a>
    </div>
</div>

@mrtoxas · 07.06.2016, 09:26

CSS
1
2
a{
  display:block;

@frenchi · 07.06.2016, 19:47 **[ТС]**

Всем большое спасибо! всё получилось!

Новые блоги и статьи Все статьи Все блоги /
AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .

@frenchi 0 / 0 / 0 Регистрация: 15.11.2010 Сообщений: 18

	Как сделать высоту блоков одинаковой 05.06.2016, 17:02. Показов 9545. Ответов 12 Метки нет (Все метки) Здравствуйте, помогите выстроить блоки в нужной последовательности. В основном блоке, с шириной 1280px, нужно вместить в ряд 3 блока, так чтобы ширина всех 3 блоков была одинакова а высота всех 3 блоков равнялась максимальной высоте одного из блоков. Я сделал при помощи float:left но высота всех блоков получается разная из-за разной информации внутри каждого блока. Пример на рисунке, красное как получается у меня, серое это что я хочу добиться. Спасибо. 0

@frenchi 0 / 0 / 0 Регистрация: 15.11.2010 Сообщений: 18
	05.06.2016, 20:49 [ТС]
	Спасибо всем, всё хорошо но появилась ещё одна проблема. Как сделать отступы между ячейками таблицы? 0

@frenchi 0 / 0 / 0 Регистрация: 15.11.2010 Сообщений: 18
	06.06.2016, 23:54 [ТС]
	Спасибо за подсказку про флексбокс, сделал через него, всё супер! Только осталось решить ещё одну проблемку, нужно блок сделать ссылкой, если я делаю блок ссылкой то у меня не работает динамическое растягивание блока, если делаю ссылку внутри блока то ссылкой является только текст внутри блока. 0

@frenchi 0 / 0 / 0 Регистрация: 15.11.2010 Сообщений: 18
	07.06.2016, 19:47 [ТС]
	Всем большое спасибо! всё получилось! 0

Как сделать высоту блоков одинаковой

Решение