Jump to content
  • 0

Первый в потоке блок обтекает соседний блок

ShumNo

Asked by ShumNo,

 Share

Question

ShumNo Explorer

ShumNo

Posted
Posted (edited)

Я снова тут и снова прошу совета опытных верстальщиков

Два блока див у одного стоит обтекание всеми остальными

  <style type="text/css">
   .layer1 {
	float: left;
	width: 40%;
   }
  </style>

  <div class="layer1">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  <div>
   Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel 
   illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio 
   dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te 
   feugat nulla facilisi.
  </div>

Работает данный пример только, если обтекаемый блок идет первым в потоке тогда остальные его будут обтекать, а что делать, если нужно чтобы первым он не был, а первым шел контент и контент обтекал сайдбар?

Edited by ShumNo
Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
Serlutin Explorer

Serlutin

Posted
Posted

Расскажите, что вам нужно сделать? Если вы хотите сделать сайт с помощью Div, погуглите на тему Двухколоночный макет или Трехколоночный макет. Если лень искать, то вот здесь можно найти кучу макетов, где контент идет в коде первым.

Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted
Работает данный пример только, если обтекаемый блок идет первым в потоке тогда остальные его будут обтекать, а что делать, если нужно чтобы первым он не был, а первым шел контент и контент обтекал сайдбар?

не осилил, нарисовать можно?

Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted (edited) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="width:100%;height:100%;" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>test</title>
		<style type="text/css">
			* {
			margin:0;
			padding:0;
			}
			html, body {
				width:100%;
				height:100%;
			}
			#first {
				width:80%;
				min-height:80%;
				border:20px solid white;
				background:#484848;
				margin:0 auto;
				overflow: hidden;
			}
			#second {
				width:30%;
				background:#5599ff;
				float:right;
				border-bottom:10px solid white;
				border-left:10px solid white;
			}
		</style>
	</head>
	<body>
		<div id="first">
			<div id="second">
				text1
			</div>
			text2
		</div>
	</body>
</html>

Edited by stars
Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted

вы что издеваетесь? ))) Вы в курсе что блоки они как бы имеют форму прямоугольника(в частных случаях квадрата)? они сами по себе не изгибаются, не искривляются и не бывает блоков формой клюшки

Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted (edited)
Конечно в курсе, но ведь свойство float заставляет прямоугольные блоки становится клюшкой :(

В том-то и дело что нет(он как был квадратный так и остался...)... Не ну если вам из прицепа надо сделать синей блок в верху DOM то сделайте еще 2 блока 1 блок внутри которого будет идти с начало синий потом серый(фактически весь мой пример) и синий блок сделайте абсолютом... единственно что блоком#second надо будет ловить размеры абсолюта...

Edited by stars
Link to comment
Share on other sites
  • 0
novicheG Explorer

novicheG

Posted
Posted

Но вот с изображением то это так и происходит (если изображением - будет синий блок) (т.е. черный естественно все равно будет прямоугольным но вот обтекание текстом будет по такому макету - неправильной формы).

Думаю и с дивом возможно, к примеру через display:inline-block,

Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
  • Author
Posted (edited)

Свою задачу (первый в потоке идет блок с контентом черный который обтекает второй блок в потоке синий) можно решить только если синий блок будет фиксированный и по высоте, а вот чтобы не фиксированный

Edited by ShumNo
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept