Div блоки

RiG · March 11, 2011

Хочу расположить 3 блока div горизонтально. левый и правый фиксированной длины, средний растягивается на ширину страницы. Пишу такой текст

<div style='background:red; width:63px; height:38px; float: left'>
Левый блок
</div>

<div style='background:blue; height:38px; margin-left:63px; margin-right:14px;'>
Центр
</div>

<div style='background:green;width:14px; height:38px; float:right;'>
Правый блок
</div>

но почему то 3 блок съезжает вниз....что я не так делаю?

Scrum · March 11, 2011

Порядок расположение блоков неправильный.

Почитайте, будет полезным. Клац

RiG · March 11, 2011

Спасибо, разобрался. Но задача усложнилась. В центре размещается ещё 2 diva (div1 и div2) с расположением слева и справа соответственно. Правый из этих блоков(div2) можно сделать фиксированной ширины не важно, а вот левый (div1) резиновый. Но проблема: Если в div 1 всунуть очень длинный текст, то если он не помещается при текущем разрешении экрана, то блок div 2 прыгает вниз ((( Как быть?

<div style='background:red; width:63px; height:38px; float: left'>
Левый блок
</div>
<div style='background:green;width:14px; height:38px; float:right;'>
Правый блок
</div> 
<div style='background:blue; height:38px; margin-left:63px; margin-right:14px;'>
<div style='height:38px; float:left; position: relative; top: 11px;'>
	<b>Очень очень длинный текст который не помещается. Уменьшите окно браузера чтобы увидеть как текст {link-category} из следующего diva прыгнет вниз за пределы строки.</b>
  </div>

  <div style='Width:344px;height:38px; float:right; position:relative; top:11px; text-align:right;'>
	<b>{link-category}</b>
  </div>
</div>

Scrum · March 11, 2011

Стили лучше выносить в отдельный файл.

Должно выглядеть примерно так.

<! doctype html >
<html>
	<head>
		<style>
			* {
				border: 1px solid red;
			}
			html, body {
				margin: 0;
				padding: 0;
				border: none;
			}
			#wrap, #content {
				overflow: hidden;
			}
			.left {
				float: left;
			}
			.right {
				float: right;
			}
			.aside, .box {
				width: 200px;
				height: 200px;
			}
			#content {
				margin: 0 200px;
			}
			#subcontent {
				margin: 0 0 0 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="right aside">left aside</div>
			<div class="left aside">right aside</div>
			<div id="content">
				<div class="left box">left box</div>
				<div id="subcontent">subcontent</div>
			</div>
		</div>
	</body>

</html>

p.s. Случаем не под ДЛЕ интегрируете ?

RiG · March 11, 2011

Именно под него. Спасибо, допёр в принципе сам, но ваш совет тоже верен)

Sign In

Div блоки

Question

RiG

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

RiG

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

RiG

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information