Горизонтальная верстка.

Atilla · August 13, 2010

Надо горизонтально сверстать страницу.

Есть основной блок (id="main") и блоки поменьше (class="block"), шириной и высотой равные ширине и высоте страницы:

<div id="main">
	<div class="block">
		...
	</div>
	<div class="block">
		...
	</div>
	<div class="block">
		...
	</div>
	<div class="block">
		...
	</div>
	...
</div>

Как при помощи css сверстать так, чтобы блоки class="block" стояли друг за дружкой по горизонтали, даже если выходят за границу экрана?

P.S. В интернетах рецепт при помощи javascript изменять ширину основного блока и float:left для блоков поменьше. Не хотелось бы использовать javascript...

psywalker · August 13, 2010

1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		div#main { white-space: nowrap;}
		div.block { display: inline-block; width: 500px; height: 500px; background: red; margin: 0 3px;}

	</style>
</head>

<body>
<div id="main">
	<div class="block">
		...
	</div>
	<div class="block">
		...
	</div>
	<div class="block">
		...
	</div>
	<div class="block">
		...
	</div>
	...
</div>

</body>
</html>

2) Либо таблица

Atilla · August 13, 2010

Помогло, спасибо.

Sign In

Горизонтальная верстка.

Question

Atilla

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Atilla

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information