Текст по разным сторонам div

voooodoo · December 27, 2009

Хочу спросить тривиальную задачку на которую я не знаю правильного ответа.

Наглядный пример того что должно быть, если не понятно чтото пишите думаю опишу

Есть простой div(резиновый 100%) внутри его есть два куска тектста один кусочек должен быть прижат к левой стороне, вотрой должен быть прижат к правому краю.

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

Также хотел спросить почему если сделать два блока одному задать float:left, а второму float:right. Заведомо сделать ширину блоков чтобы они поместились в одну строку(на одном уровне) монитора тогда в ie6 блоки располагаются как нужно слева один блок, справа второй блок, а в ff например второй блок переносится на новую строку и там прижимается к правому краю. Выходит тоже самой только в разных строках(уровнях).

Если таким образом продолжать и накопировать несколько блоков тогда все остальные станут как нужно справа напротив левого блока за исключением первого.

небольшой пример

psywalker · December 27, 2009

Ну ка зацени

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}

		/* Text */
		div.text { zoom:1; overflow: hidden; margin-bottom: 100px; border: 1px solid #000;}
			div.text div.left { float: left;}
			div.text div.right { float: right;}

		/* Block */
		div.block {zoom:1; overflow: hidden;border: 1px solid #000;}
			div.block div.left,
			div.block div.right { 
				float: left; 
				width: 200px; 
				height: 200px;
				background: red;
			}
			div.block div.right { float: right;}

</style>
</head>

<body>

	<!-- Text -->
	<div class="text">
		<div class="left">Наглядный пример того что должно быть</div>
		<div class="right">Наглядный пример того что должно быть</div>
	</div>

	<!-- Block -->
	<div class="block">
		<div class="left">Наглядный пример того что должно быть</div>
		<div class="right">Наглядный пример того что должно быть</div>
	</div>

</body>
</html>

zoom:1; - это для ИЕ6

voooodoo · December 27, 2009

psywalker

Офигеть все как нужно и так просто. Не могу до сих понять в чем я тупил что у меня выходило совсем не так как у Вас.

Спасибо большое за помощь.

PS: хороший стиль написания css кода для верстки, эх приучиться бы тоже так писать.

Edited December 27, 2009 by voooodoo

psywalker · December 27, 2009

psywalker
Офигеть все как нужно и так просто. Не могу до сих понять в чем я тупил что у меня выходило совсем не так как у Вас.
Спасибо большое за помощь.
PS: прикольный стиль написания css кода для верстки

Ничего прикольного, просто побольше читай, учи, и практикуйся, в 1000 раз лучше будешь писать

Sign In

Текст по разным сторонам div

Question

voooodoo

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

voooodoo

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information