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

Самый простой способ сделать блоки с одинаковой высотой можно с помощью JQuery, к примеру возьмем следующую верстку блоков:

<div class="list">
	<div class="list-item">Block #1</div>
	<div class="list-item">Block #2</div>
	<div class="list-item">Block #3</div>
	<div class="list-item">Block #4</div>
	<div class="list-item">Block #5</div>
	<div class="list-item">Block #6</div>
</div>
HTML
Элементы имеют фиксированную ширину и обтекание с справа (float: left):
.list {
	margin: 0 -20px 0 0;
	overflow: hidden;
}
.list-item {
	width: 296px;
	float: left;
	margin: 0 20px 20px 0;
	border: 3px solid orange;
	padding: 15px 20px;
}
CSS

Из-за разной высоты блоков получается следующий результат:

Данную проблему можно исправить, выставив всем элементам высоту следующими способами:

27.05.2021
2113

Комментарии

, чтобы добавить комментарий.

Другие публикации

jQuery UI Sortable - перетаскивание элементов
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
28257
+8
Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
7510
0
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
3944
+2
Видео c YouTube в качестве фона сайта
Пара примеров как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery.
7546
-1
Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
15486
+2
Как поменять элементы местами в JQuery
Два примера, как поменять два блока местами и переместить содержимое между ними с помощью jQuery.
3008
+2