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

Самый простой способ сделать блоки с одинаковой высотой можно с помощью 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

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

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

В данном примере поиск элементов, которым нужно задать одинаковую высоту происходит по родителю.

$(function(){	
	$('.list').each(function(){
		var column = 0;
		$(this).children().each(function(){
			h = $(this).height();
			if (h > column) {
				column = h;
			}
		});
		$(this).children().height(column);
	});
});
HTML

Результат:

$(function(){	
	var column = 0;
	$('.list .list-item').each(function(){
		h = $(this).height();
		if (h > column) {
			column = h;
		}
	}).height(column);
});
JS

Результат:

Самый лучший вариант – сделать одну высоту блоков в одной горизонтальной линии, для этого потребуется изменить верстку:

<div class="list">
	<div class="list-row">
		<div class="list-item">Block #1</div>
		<div class="list-item">Block #2</div>
	</div>
	<div class="list-row">
		<div class="list-item">Block #3</div>
		<div class="list-item">Block #4</div>
	</div>
	<div class="list-row">
		<div class="list-item">Block #5</div>
		<div class="list-item">Block #6</div>
	</div>
</div>
HTML
$(function(){	
	$('.list-row').each(function(){
		var column = 0;
		$(this).children().each(function(){
			h = $(this).height();
			if (h > column) {
				column = h;
			}
		});
		$(this).children().height(column);
	});
});
JS

Результат:

27.05.2021
3182

Комментарии

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

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

jQuery UI Sortable - перетаскивание элементов
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
30387
+9
Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
9524
+2
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
4794
+2
Видео c YouTube в качестве фона сайта
Пара примеров как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery.
9055
+2
Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
16744
+2
Как поменять элементы местами в JQuery
Два примера, как поменять два блока местами и переместить содержимое между ними с помощью jQuery.
4050
+2