Верстка: выравнивание блоков по ширине

Question

[Akram]

Есть набор блоков вида
<div class="item">
1
</div>
<div class="item">
2
</div>

и тд.

ширина и высота блоков фиксирована, допустим, 250*150. нужно выравнивать их, размещая в ряд по 4 или 3 штуки в зависимости от разрешения. например, от 1024 до 1280 ставим в ряд 3 блока, выше 1280 ставим 4 блока. блоки при этом должны занимать все свободное пространство в ряду.

кто может подсказать?

Comments

[Akram]

update
почти помогло решение, предложенное w999d, однако, как и предполагалось, проблема в последнем ряду осталась: v100.1gb.ru/test.htm

[Akram]

update2
решается путем добавления пустых элементов с нулевой высотой. заодно не нужен фикс с 100% шириной. некрасиво, но работает. другого варианта без скрипта пока нет.
v100.1gb.ru/test4z.htm

Answer 1

[Shvonder]

Я думаю без скриптов тут не обойтись. Сделал пример с использованием jQuery. Проверил только в FF 3.6:

<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>

Comments

[Akram]

решение рабочее, спасибо. осталось теперь придумать способ сделать без скрипта )

[Shvonder]

Я думаю вы не найдете такого способа. Вот если бы количество элементов в строке было фиксированным то это не сложно сделать. А у вас оно меняется, соответственно и расстояние между элементами не линейно зависит от ширины экрана. Обязательно надо вычислять расстояние.

[Akram]

если не найдется, тогда, по-видимому придется программно добавлять пустые блоки с нулевой высотой или все таки скрипт.

[Shvonder]

Что значит программно добавлять?

Answer 2

[eresik]

А куда вы хотите чтоб девался 4й блок при малом разрешении???
Если заранее известно сколько там будет блоков, то проще всего таблицей сделать.

Comments

[Akram]

А куда вы хотите чтоб девался 4й блок при малом разрешении???

… уходил в следующий ряд. таблица не годится, т.к. число блоков неизвестно. конечно, можно исхитриться и добавлять пустые строки таблицы динамически, но… как-то это некрасиво.
в идеале должно быть так:
низкое разрешение
1 2 3
4 5 6
7

высокое разрешение
1 2 3 4
5 6 7


Answer 3

[dom1n1k]

Ну если все блоки фиксированного и одинакового размера — тогда просто сказать им всем «float: left» и вся недолга.
Они будут выстраиваться в ряд столько, сколько помещается в окне. Лишнее будет переноситься в следующий ряд.
Только в конце не забыть поток очистить («clear: both»).

Comments

[Akram]

да, наверное. но только они будут выравниваться при этом по левому краю.

[dom1n1k]

А как нужно, по центру?
Ну можно попытать другой вариант: сделать эти блоки «display: inline-block» и выводить их спложным потоком. А контейнеру-обертке сказать «text-align: center».
Вертикальное расстояние между рядами, наверное, придется регулировать через line-height, вертикальные марджины работать не будут.

[Akram]

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

[Akram]

ещё раз — проблемы с вертикальным выравниванием нет.
насчет списка не совсем понял, можете привести пример?

[dom1n1k]

Akram, если по ширине — ну тогда наверное вариант с inline-block и пойдет. Только text-align у контейнера сменить на justify. Хотя ручаться не буду, на практике не пробовал.

almazmusic, а «vertical-align: top» разве для inline-block работает? Я не помню точно. Оно точно работает для table-cell, но там будут проблемы со старыми браузерами.

[Akram]

justufy приведет примерно к следующему:

1   2   3
4   5   6
  7   8

[dom1n1k]

Мм… нет, при justify последняя строчка не центруется. Она выравнивается влево.
Но вот то, что в ней почти наверняка собьется расстояние между блоками — это да.

[olamedia .]

в конце нужно просто еще один элемент шириной 100% добавить

[dima_smol]

родительский контейнер, в котором будут эти блоки с overflow:hidden и margin:0 auto;
для блоков внутри float:left;

[Akram]

dom1n1k да, расстояние не такое будет, как в других рядах.
almazmusic нет, скрипт не хотелось бы применять.
насчет 100% элемента попробую, но скорее всего приведет к изменению расстояния между блоками в последнем ряду.
dima_smol margin:0 auto; расположит его по центру, разве нет?

Answer 4

[dom1n1k]

Мм… нет, при justify последняя строчка не центруется. Она выравнивается влево.
Но вот то, что в ней почти наверняка собьется расстояние между блоками — это да.

Comments

[dom1n1k]

Промазал, это в тред выше.

Answer 5

[Антон]

Как вариант создайте DIV с определенной высотой(у вас 150px) и overflov:hidden, когда помещаться будет 4 блока то они покажутся все, а если 4-й не влезет он перейдет на следующую строку и не будет виден т.к. все что ниже закрыто для показа.

Comments

[Akram]

ммм как не виден? они все должны быть видны.

[Антон]

Я думал вам нужно вывести в зависимости от разрешения экрана разное количество блоков.

Answer 6

[Константин Китманов]

посмотрите, как сделан поиск Яндекса по картинкам. Кажется, там именно таблицы.

Comments

[Akram]

вот именно, таблицы (

[Константин Китманов]

увы, увы. Зато работает.
Верстальщики яндекса без фанатизма относятся к таблицам, как средствам создания лэйаутов.

[Akram]

я тоже без фанатизма. но в данном случае хотелось бы разобраться — можно или нет.

Answer 7

[Akram]

контент генерится на сервере.

Comments

[Akram]

это к предыдущему комменту, извините.

[Shvonder]

А как вы на сервере сможете определить размер экрана клиента?

[Akram]

его не придется определять. по условию отображается либо 4 в ряд, либо 3. поэтому можно добавлять пустые блоки в зависимости от текущего количества правильных блоков.
либо просто всегда добавлять внизу 4 пустых. просто как-то это некрасиво выглядит, на мой взгляд.
вот вариант с пустым блоком, он, вроде, работает, по крайней мере, в хроме.
v100.1gb.ru/testz.htm

Answer 8

[alexbeep]

Вопрос, я так понимаю, сводится к центрированию float-блоков. Задача нетривиальная.
Рабочее решение вот, пожалуй, единственное, когда-то использовал в работе его

www.cssplay.co.uk/menus/centered.html

Comments

[Akram]

прочтите, пожалуйста, условие еще раз.
при чем тут центрирование? собственно, лучшее решение на текущий момент уже приведено, так что спасибо за интерес к вопросу.

[alexbeep]

Прочел, увидел floatы фиксированной ширины, то, что они должны занимать строчку в зависимости от ширины контейнера и то, что по левому краю некрасиво -> задача сводится к центрированию float-блоков