Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Расположить картинки вертикальными рядами (https://javascript.ru/forum/xhtml-html-css/45270-raspolozhit-kartinki-vertikalnymi-ryadami.html)

kostyanet 21.02.2014 13:27

Расположить картинки вертикальными рядами
 
В "представление" приходит от 1 до Х картинок. Картинка 0 - главная. Остальные - дополнительные. Которые естественным образом располагаются в своем блоке (сейчас это td) горизонтально, рядами, сверху вниз.

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

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

Может кто делал и сразу знает, или другие версии есть.

Aetae 21.02.2014 13:35

Ничего не пнятно. Пример.

kostyanet 21.02.2014 14:52

В общем стилями не удалось достичь, поиск не дал никуда. Там еще проблема в модных потугах на колонки параграфов из-за которых слово columns засерено. Сделал так (применительно к шаблону на php)
<td><?php echo array_shift($images);?></td>
	<?php
	if(count($images)) {
		$c = array_chunk($images, 4);
		foreach($c as $i)
			echo '<td><span>',join(null,$i),'</span></td>';
	}
?>


Массив колется на части по 4, а затем каждая часть запихивается в свой td в котором уже спокнойно располагается вертикально за счет естественного для img inline

kostyanet 21.02.2014 14:55

Цитата:

Сообщение от Aetae
Ничего не пнятно. Пример.

Это надо дизайнера.

Обычно элементы располагаются по вертикали и переносятся на следующую "строку" в порядке поступления. Правильно? Ну как вот я пишу этот текст.

А надо по-японски.

в
о
т

т
а
к

Но при этом вторая строка, которая тут - колонка, должна идти справа от первой.

в и
о л
т и

т е
а щ
к ё

теперь понятно? Как японцы и другие вертикальные народы пишут - вот так и надо.

Может быть dir можно поменять для отдельно взятого td?

kostyanet 21.02.2014 14:59

Задница:

Цитата:

A writing mode in CSS is determined by the writing-mode, direction, and text-orientation properties. It applies only to the <text> element,
а я было разбежался уже править.

Да и аще

Only supported in IE8

Aetae 21.02.2014 15:30

Эти "элементы" они одинаковых размеров или рандомны?

kostyanet 21.02.2014 21:58

Размеры разные, габариты одинаковые: 600х600, а дополнительные уменьшаются стилями до 150.

Переделал на списки

foreach($c as $i)
	echo '<li><ul><li>',join('</li><li>',$i),'</li></ul></li>';


Часовой пояс GMT +3, время: 02:12.