Элементы списка одинаковой высоты

Итак, начнем с разметки и стилей.

HTML

	<div class="wrap">
		<ul class="clients-list clearfix j-pagination-content">
			<li class="client-item">
				<div class="client-logo">
					<img width="100" height="85" title="Клиент №1" alt="Клиент №1" src="/img/cl1.png" />
				</div>
				<h4 class="client-name">Клиент №1</h4>
				<div class="client-descr"></div>
				<div class="b-gline"></div>
			</li>
			<!-- … -->
			<li class="client-item">
				<div class="client-logo">
					<img width="100" height="85" title="Клиент №6" alt="Клиент №6" src="/img/cl6.png" />
				</div>
				<h4 class="client-name">Клиент №6</h4>
				<div class="client-descr"></div>
				<div class="b-gline"></div>
			</li>
		</ul>	
	</div>

CSS

	div.wrap{width:1000px; margin:0 auto;background:#e9e9e9; padding:25px;}
	h1{font-size:25px; text-align: center; margin-bottom:15px; margin-top:15px; color:#8b8a8a;}
	ul.clients-list {margin-left: -15px; padding: 0 20px;}
	ul.clients-list > li {background: none repeat scroll 0 0 #fff; padding: 15px 15px 30px; position: relative;}
	li.client-item {border-radius: 3px; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1); float: left; margin: 0 0 25px 15px; width: 280px;}
	.client-logo {margin-bottom: 30px; text-align: center;}
	.client-name {font-size: 17px; margin-bottom: 20px; text-align: center;}
	h4 {line-height: 20px;}
	.b-gline {background: #c7c7c7; bottom: 2px; height: 1px; left: 0; position: absolute; width: 310px;}

Затем, чтобы выровнять элементы списка по высоте, необходимо использовать JavaScript. Без него не обойтись, так как ни одно правило CSS в этом случае не поможет. К страничке необходимо подключить следующий JS-код, который размещен в файле script.js

JavaScript

	function ListMng(p)
	{
		var o = this;
		this.root = $(p.root);
		this.itemsBox = $(p.itemsBox, this.root);
		this.items = $(p.items, this.itemsBox);
		this.colRowItems = p.colRowItems;
		this.setItemsHeight = function()
		{
			var windowWidth = $(document).width();
			var items =  o.itemsBox.find('.client-item');
			while(items.length) {
				var curRowItems = $(items.splice(0,o.colRowItems));
				var maxHeight = 0;
				curRowItems.each(function(){
					var item = $(this);
					var height = item.outerHeight();
					if(height > maxHeight)
					{
						maxHeight = height;
					}
				});
				curRowItems.css({height: maxHeight});
			}
		}
		this.init = function()
		{
			o.setItemsHeight();
			$(window).on('resize', o.setItemsHeight);
		}
		this.init();
	}
	$(function(){
		new ListMng({
			root: '.wrap',
			itemsBox: '.clients-list',
			items: '.client-item',
			colRowItems: 3
		});
	}); 

Обращу внимание читателя на то, что перед подключением скрипта к странице необходимо подключить jQuery.

Ознакомившись с кодом скрипта можно увидеть, что функция конструктор ListMng состоит из 2 функции (методов) и получает на входе объект с параметрами.

Параметрами являются:

• имя класса родительского элемента (root)
• имя класса списка (itemsBox)
• имя класса элементов списка (items)
• количество элементов в одной строке (colRowItems)

Функция setItemsHeight является основной, с ее помощью рассчитывается значение высоты самого высокого блока в первой «строке», а затем это значение присваивается все остальным элементам первой «строки». Таким образом все элементы в «строке» становятся одинакового размера. То же самое происходит и со всеми остальными «строками», расположенными ниже.

Функция init «запускает» процесс расчета высоты блоков после загрузки страницы, а также при изменении размеров окна браузера.

В заключении заметки, хотелось бы отметить, что данный скрипт порой очень помогает при разработке сайтов.

Демо-страничка спримером из заметки