Содержание страницы
домикГлавная / Элементы html и css / Выровнять div по высоте
div по высотеДля примера, чтобы блоки были одной высоты, я использую три способа, с помощью которых можно легко сделать и выровнять div по высоте. Первые два способа для этой цели исключительно используют css, а в третьем подключим скрипт js.

А во-втором примере помимо этого, можно будет подогнать содержимое блока в подходящее для вас место.

1 способ выравнивания div по высоте с помощью height.

Мы сделаем непосредственно каждому блоку div одинаковую высоту с помощью CSS свойства height.
И для начала мы зададим каждому блоку свой класс и пропишем для них необходимые свойства для выравнивания div между собой по высоте.
htmlCOPY
<style> .my_height, .my_height2 { margin: 10px; padding: 10px; width: calc(50% - 24px); display: inline-block; vertical-align: top; height: 100px; line-height: 20px; overflow-y: auto; box-sizing: border-box; } .my_height { background-color: #f9aaaa; border: 3px dotted #f86565; } .my_height2 { background-color: #b1eab1; border: 3px dotted #61bd62; } <div class="my_height">999<br>999</div> <div class="my_height2">000<br>000<br>000<br>000<br>000</div> </style>

Вот, что у нас получилось.

999
999
000
000
000
000
000
В этом примере для визуального отображения я с помощью свойств: border задал блокам рамку, box-shadow - сделал css тень для блока ( более красивый вид ), display - прописал inline-block, то есть сделал блоки в один ряд, width - задал ширину, и последнее с помощью height выровнял и сделал блоки div по высоте.

Минус этого варианта: количество букв и слов ( мой пример ) в каждом блоке может быть не одинаковым и поэтому текст в блоке может выходить за его пределы ( за рамку ), что будет отображаться не красиво. Да и при различных разрешениях экрана может присутствовать данный негатив.

Для избежания этого я прописал в CSS свойство overflow-y со значением auto, где выступающий за пределы текст просто будет обрезаться, и в итоге образовалась вертикальная прокрутка.

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


Flex буквально недавно внедрился в css и показал отличные результаты для правильной постановки блоков и его содержимого по позициям.

Задайте необходимую позицию блока DIV и его содержимому, и после скопируйте полученный код в Результат CSS и HTML.
111
222
222
333
333
333
444
444
444
444
555
555

Выравнивание DIV

Содержимое по оси X

Содержимое по оси Y

Результат CSS и HTML.

<style>

body *{box-sizing: border-box;}

.box-direct {

margin: 10px;

padding: 10px;

border: 1px solid #900000;

box-sizing: border-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start;

-webkit-align-content: flex-start;

-ms-flex-line-pack: start;

align-content: flex-start;

-webkit-align-items: stretch;

-ms-flex-align: stretch;

align-items: stretch;

}


.box-child {

margin: 10px;

padding: 10px;

border: 1px solid green;

box-sizing: border-box;

width: calc(33.33% - 20px);

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start;

-webkit-align-items: flex-start;

-ms-flex-align: start;

align-items: flex-start;

-webkit-order: 0;

-ms-flex-order: 0;

order: 0;

-webkit-flex: 0 1 auto;

-ms-flex: 0 1 auto;

flex: 0 1 auto;

-webkit-align-self: auto;

-ms-flex-item-align: auto;

align-self: auto;

}

</style>


<div class="box-direct">

<div class="box-child">111</div>

<div class="box-child">222<br>222</div>

<div class="box-child">333<br>333<br>333</div>

<div class="box-child">444<br>444<br>444<br>444</div>

<div class="box-child">555<br>555</div>

</div>


В этом варианте для выравнивания div по высоте я предлагаю для блока в свойстве display использовать значение flex, чтобы добиться желаемого результата. И здесь отображение блоков уже будет более грамотным, то есть все div будут одинаковой высоты и вся информация в них будет полностью видна при любом раскладе.

Выравниваем DIV по высоте с помощью JS

А в этом примере, чтобы сделать и после выровнять блоки div по высоте, я буду использовать js скрипт, который и выполнит необходимую функцию.
12345 54321
12345 54321
54321 12345
54321 12345
54321 12345
54321 12345
html, css, jsCOPY
<style> .my_box_left, .my_box_right { display: inline-block; margin: 20px; padding: 20px; width: calc(50% - 44px); color: #fff; vertical-align: top; box-sizing: border-box; } .my_box_left { background-color: #900000; } .my_box_right { background-color: blue; } </style> <div class="my_box_left">12345 54321<br>12345 54321</div> <div class="my_box_right">54321 12345<br>54321 12345<br>54321 12345<br>54321 12345</div>
Какой из примеров использовать лучше, - это решать вам, но я предпочитаю конечно второй вариант.
Понравились представленные примеры, - ставьте лайки и делитесь статьёй с друзьями.
Дата публикации: 12.04.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!