Одинаковая высота у блоков

Содержание скрыть

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

Код HTML

<ul class="products">
	<li class="box height_fix">Содержимое блока 1</li>
	<li class="box height_fix">Содержимое блока 2</li>
	<li class="box height_fix">Содержимое блока 3</li>
	<li class="box height_fix">Содержимое блока 4</li>
</ul>

<li class="box height_fix">Содержимое блока 1</li>

<li class="box height_fix">Содержимое блока 2</li>

<li class="box height_fix">Содержимое блока 3</li>

<li class="box height_fix">Содержимое блока 4</li>

</ul>

Код скрипта

<script type="text/javascript">
jQuery(function($){
	var max_col_height = 80; // максимальная высота, первоначально 80
	$('ul.products li.box.height_fix').each(function(){ // цикл "для каждой из колонок"
		if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,
			max_col_height = $(this).height(); // то она сама становится новой максимальной высотой
		}
	});
	$('ul.products li.box.height_fix').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты
});
</script>

jQuery(function($){

var max_col_height = 80; // максимальная высота, первоначально 80

$('ul.products li.box.height_fix').each(function(){ // цикл "для каждой из колонок"

if ($(this).height() > max_col_height) { // если высота колонки больше значения максимальной высоты,

max_col_height = $(this).height(); // то она сама становится новой максимальной высотой

}

});

$('ul.products li.box.height_fix').height(max_col_height); // устанавливаем высоту каждой колонки равной значению максимальной высоты

});

</script>

Тэги могут быть разными, вместо списков li могут, могут быть div.

Рекомендуем еще эти статьи

15.08.2019

define('WP_HOME','http://example.com');
define('WP_SITEURL','http://example.com');

1 2	define('WP_HOME','http://example.com'); define('WP_SITEURL','http://example.com');

MENEX.RU

Одинаковая высота у блоков

Код HTML

Код скрипта

Рекомендуем еще эти статьи

Woocommerce полезные хуки

Woocommerce - не обновляется общая сумма заказа на странице корзины

Woocommerce, оформление заказа - убрать таблицу или заменить

Разный текст и стиль в зависимости от времени суток

Убрать пагинацию в Oxygen

WordPress — заменить url сайта через wp-config