Сетка

[JoseRodriguez]

здравствуйте

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

имеем подобный макет:

все разноцветные блоки - фотографии (к примеру)

собственно интересно есть ли какие хитрости, которые могут помочь расположить фотографии как показано в макете?

[ceil100]

4 контейнерa + каждый контейнер с цветом

это лобовая верстка без позиционирования

можно в два уложиться

Edited November 1, 2011 by ceil100

[psywalker]

Флоатами всё это раскидать. Или скрипты.

[ShumNo]

здравствуйте

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

имеем подобный макет:

все разноцветные блоки - фотографии (к примеру)

собственно интересно есть ли какие хитрости, которые могут помочь расположить фотографии как показано в макете?

О какой "ужасной кучи блоков" речь? За чем что-то позиционировать абсолютом?

Если блоки статичны, то как уже сказали float в самый раз, если же нет, то как вариант применить такую штуку

http://isotope.metafizzy.co/

[Int]

А может быть, таблицей?

[psywalker]

А может быть, таблицей?

А ты не мог бы продемонстировать сие извращение?

[Gaspode]

Тут таблицей вообще, по-моему, не сделать. По крайней мере, одной.

[sigma77]

Gaspode,

Да не, табицей тут делается. Только нафиг надо?

Здесь четко выделяются 3 группы блоков - левая колонка, правая (с похожей структурой), низ. Если блоки фикс, то я сложностей не вижу. Для резины нужна информация о взаимном поведении всех блоков.

[Softlink]

Gaspode,

Да не, табицей тут делается.

Не, по-моему одной таблицей точно не обойтись. Всю картину портят два блока справа перед футером. Если бы они "делили" желтый блок с такой же пропорцией, как и вверху, то да - одна таблица, а так придется вкладывать дополнительную.

[psywalker]

Gaspode,

Да не, табицей тут делается. Только нафиг надо?

Здесь четко выделяются 3 группы блоков - левая колонка, правая (с похожей структурой), низ. Если блоки фикс, то я сложностей не вижу. Для резины нужна информация о взаимном поведении всех блоков.

А нафига тут колонки?

[sigma77]

А нафига тут колонки?

Для удобства и надежности каркаса.

[psywalker]

А нафига тут колонки?

Для удобства и надежности каркаса.

А по моему тут нафиг никакие колонки совершенно не нужны, да и потом это только помеха, для этой хаос-кучи накиданной)

Берёшь блок, закидываешь туда всю эту муть, флоатишь и идёшь пить пиво.

[Nekromancer]

Gaspode,

Да не, табицей тут делается.

Не, по-моему одной таблицей точно не обойтись. Всю картину портят два блока справа перед футером. Если бы они "делили" желтый блок с такой же пропорцией, как и вверху, то да - одна таблица, а так придется вкладывать дополнительную.

Делаем тупо в том месте не 2, а 3 ячейки и получаем счастье. Всё равно colspan юзать. Одной хватит.

[sigma77]

А по моему тут нафиг никакие колонки совершенно не нужны, да и потом это только помеха, для этой хаос-кучи накиданной)

Берёшь блок, закидываешь туда всю эту муть, флоатишь и идёшь пить пиво.

В чём помеха-то? Наоборот так проще.

[mishka]

Как по мне так колонки нужны, одна так точно.

Иначе не разрулить это:

Зеленый и коричневый нужно обьединить. Но это не универсально

универсально http://masonry.desandro.com/

[Nekromancer]

Согласен в принципе здесь с Сигмой и Мишкой, но я бы сделал одной таблицей. Это же "сетка" в конце концов. Блоки не в меньшей мере извращение в данной ситуации.

[psywalker]

А по моему тут нафиг никакие колонки совершенно не нужны, да и потом это только помеха, для этой хаос-кучи накиданной)

Берёшь блок, закидываешь туда всю эту муть, флоатишь и идёшь пить пиво.

В чём помеха-то? Наоборот так проще.

Аа, ну я тя понял. Ну да, если так смотреть,то да.

Nekromancer

А сделай плиз таблицей, очень интересно посмотреть просто.

[Softlink]

у меня вот так получилось http://jsfiddle.net/aXVqx/, но тот блок я не стал делить. Артур, забацай вариант с пустой ячейкой. Мне кажется, что овчинка выделки не стоит. В крайнем случае можно вложить два дива туда, чем непредсказуемость пустой ячейки.

[Nekromancer]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script></script>
<style>
	html,body {
        width: 100%;
        height: 100%;
        background: white;
		margin: 0;
		padding: 0;
    }
	table {
		width: 100%;
		height: 100%;
		border-spacing: 10px;
	}
	td {
		padding: 0;
		background: red;
	}
</style>
</head>
<body>
<table>
	<col style="width: 200px;">
	<col style="width: 200px;">
	<col style="width: 200px;">
	<col style="width: 50px;">
	<col style="width: 100px;">
	<tr>
		<td rowspan="2"></td>
		<td colspan="2"></td>
		<td colspan="2"></td>
	</tr>
	<tr>
		<td rowspan="3"></td>
		<td colspan="3" rowspan="2"></td>
	</tr>
	<tr>
		<td rowspan="2"></td>
	</tr>
	<tr>
		<td colspan="2"></td>
		<td></td>
	</tr>
	<tr>
		<td colspan="2"></td>
		<td colspan="3"></td>
	</tr>
</table>
</body>
</html>

http://jsfiddle.net/ глючит так что так

[psywalker]

Вот соорудил на блоках, но увидев вариант Softlink, изменил мнение о таблицах относительно этой задачи...хм..интересно даже.

Nekromancer

Артур, а тут что-то странное, что тут происходит?

http://jsfiddle.net/P9HYX/

[Softlink]

Артур, а тут что-то странное, что тут происходит?

http://jsfiddle.net/P9HYX/

http://jsfiddle.net/P9HYX/1/ normalized надо убрать

[psywalker]

Артур, а тут что-то странное, что тут происходит?

http://jsfiddle.net/P9HYX/

http://jsfiddle.net/P9HYX/1/ normalized надо убрать

Что, прости, убрать? Они же одинаковые ссылки? Ткни носом.

[Softlink]

Артур, а тут что-то странное, что тут происходит?

http://jsfiddle.net/P9HYX/

http://jsfiddle.net/P9HYX/1/ normalized надо убрать

Что, прости, убрать? Они же одинаковые ссылки? Ткни носом.

Код одинаковый, а слева в панели есть чекбокс "Normalized CSS", попросту - ресет. А в нем, есть такое свойство как border-collapse:collapse;, при котором не работает border-spacing, в результате ты видишь слившиеся в одно красные блоки

[psywalker]

Артур, а тут что-то странное, что тут происходит?

http://jsfiddle.net/P9HYX/

http://jsfiddle.net/P9HYX/1/ normalized надо убрать

Что, прости, убрать? Они же одинаковые ссылки? Ткни носом.

Код одинаковый, а слева в панели есть чекбокс "Normalized CSS", попросту - ресет. А в нем, есть такое свойство как border-collapse:collapse;, при котором не работает border-spacing, в результате ты видишь слившиеся в одно красные блоки

Ааа, понял, спасибо Шурик, а я всё в код смотрю, думаю, чё там разное

Хм...ну тогда это решение я пожалуй ставлю приоритетным для данной задачи. Интересно услышать мнения наших Экспертов на этот счёт

[JoseRodriguez]

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

вариант с таблицей интересный, собственно как и isotope.metafizzy.co

будет, что погрызть вечерком

спс за помощь)

[psywalker]

isotope.metafizzy.co - да, но тут позиционирование сплошное вроде.