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

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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