Двухмерная сетка (таблица) на плавающих div'ах.

InterWen · September 21, 2009

Здравствуйте.

Сел верстать галерею на div'ах, цель - 100% "прорезиненность" страницы, когда превьюшки, описания и прочая инфа, расположенная внутри плавающего div'а при недостаче места по горизонтали меняет ряд, редюцируя таким образом кол-во колонок в сетке. Все прекрасно, пока высота содержимого всех div-блоков с превьюшками равна, но если нет - с двухмерностью можно попрощаться.

Покажу на упрощенном примере:

<html>

	<head>
		<style>
			.image {
				position: relative;
				font-size: 40px;
				background-color: red;
				width: 200px;
				margin: 10px;
				float: left;
				text-align: center;
				vertical-align: bottom;
				}
		</style>
	</head>

	<body>
		<table>
			<td bgcolor=blue>
				<div style="float: right; width: auto; background-color: yellow; margin-right: 1%;">
					<div class="image">1<br><br><br><br><br><br><br><br><br><br></div>
					<div class="image">2</div>
					<div class="image">3</div>
					<div class="image">4</div>
					<div class="image">5</div>
					<div class="image">6</div>
					<div class="image">7</div>
					<div class="image">8</div>
					<div class="image">9</div>
				</div>
			</td>
		</table>
	</body>

</html>

Реально ли сделать так, чтобы блоки, переходящие на следующий ряд все шли под самым высоким блоком предыдущего. Например, на моих 1024 пикселях по горизонтали второй ряд начинается с пятого блока, но расположен он, что называется, "где было место" - под вторым, как засунуть его (и горизонталь всего ряда, соответственно) под первый div?

Заранее огромное спасибо.

Justnewone · September 22, 2009

inline-block и vertical-align

azza147 · December 30, 2011

inline-block и vertical-align

блоки с float:left; в виде мозайки, то есть 5 ровно в два раза выше 4. Как заставить 8 "прыгнуть" под 1?

Edited December 30, 2011 by azza147

Sign In

Двухмерная сетка (таблица) на плавающих div'ах.

Question

InterWen

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

azza147

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information