Как выровнять блоки по ширине с jQurey?

Question

[Andrey_Sobolev]

Добрый день!
Давным-давно здесь задавался вопрос по выравниванию блогов по ширине.
Был предложен следующий вариант:

<style>
	div.item {width: 250px; height: 150px; background: red; float: left;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	$(function ()
	{
		changeMargin();
	});
	$(window).resize(function()
	{
		changeMargin();
	});
	function changeMargin()
	{
		var container_width = $('div.container').width();
		var item_width = $('div.item').width();
		var items_count = Math.floor(container_width / item_width);
		var items_width = item_width * items_count;
		var difference = container_width - items_width;
		var margin = difference / (items_count - 1);
		$('div.item').each(function(index)
		{
			if (index > 0 && index % items_count != 0)
				$(this).css('margin-left', margin+'px');
			else
				$(this).css('margin-left', '0px');
		});
	}
</script>
<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
</div>

Только вот всем левым блокам из данного решения не присваивается свойство left-margin.
Как можно этого избежать?

Answer 1

[Евгений Петров]

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

Что же касается вопроса по скрипту.

всем левым блокам из данного решения не присваивается свойство left-margin

Присваивается. Только значение '0' — там же проверка стоит на соответствие количеству в строке.

if (index > 0 && index % items_count != 0)
	$(this).css('margin-left', margin+'px');
else
	$(this).css('margin-left', '0px');

Comments

[Andrey_Sobolev]

Спасибо за ответ и за flex! А как быть примерно с IE (ниже IE10, около 4% по статистике), можно уже игнорировать или все же писать костыли?

[Евгений Петров]

Это уж от условий проекта зависит. Если же нужно поддерживать IE9 и ниже, то писать костыли, но благо есть возможность применять и conditional comments, и conditional compilation.

Ну и я бы применял в этом случае именно display:inline-block.
Вот пример, демонстрирующий одну из проблем применения float.

Answer 2

[Хазрат Гаджикеримов]

Советую этот плагин

Comments

[Andrey_Sobolev]

Спасибо за альтернативу, но все же хотелось бы докопаться до причины в конкретном коде.