Два блока(div) заданной шириной рядом по горизонтали + текст обтекает только один блок

Rossi25 · March 22, 2011

Здравствуйте!

Вот здесь на сайте есть такой пример - http://htmlbook.ru/faq/kak-razmestit-dva-sloya-po-gorizontali.

Мне хотелось бы сделать, чтобы текст внизу "Duis te feugifacilisi..." шел сразу под желтым блоком, а при увеличении содержимого серого, обтекал бы серый.

Да, и самое главное, чтобы сохранилось у серого блока "прилипание" левого края к желтому при растягивании ширины браузера, т.е. float: right; для .layer2 не совсем подходит.

Кто-нибудь знает, как это реализовать блоками, может по-другому сверстать нужно?

Вот картинка, как должно выглядеть:

Edited March 22, 2011 by Rossi25

tius · March 23, 2011

Например:


<!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>Слои по горизонтали</title>
	<style type="text/css">
	.wrapper {
		width: 500px;
	}
	.layer1 {
		background-color: #fc0;
		padding: 5px;
		float: right;
		width: 190px;
		display: inline-block;
	}
	.layer2 {
		background-color: #c0c0c0;
		padding: 5px;
		width: 290px;
		float: right;
		display: inline-block;
	}
	</style>
</head>
<body>
<div class="wrapper">
	<div class="layer2">
  		Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
	</div>
	<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>
	<p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate 
 	velit esse molestie consequat. amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d</p>
</div>
</body>
</html>

Edited March 23, 2011 by tius

Rossi25 · March 23, 2011

Спасибо, большое, tius !

У меня не было такой идеи, ограничить шириной обертки. Но все-же планировалось, что нижний текст не будет ограничен по ширине верхними двумя блоками (см. рис.1), а продолжится под серой линией. Т.е. использовать не width, а min-width, как в замечательном примере на сайте. В идеале хотелось, чтобы серый блок располагался по ширине по центру между желтым блоком и правой границей браузера (рис. 2). Как-то можно это реализовать без js? Я думал, что придется "играться" с margin,padding, возможно также position... но, к сожалению, не получается добиться нужного.

рис. 1 —————————————— рис. 2

PS: к сожалению, я не могу пользоваться личными сообщениями (видимо как новичок), даже прочитать присланное, так что пишите все тут.

[#10226] Вы не можете пользоваться личными сообщениями.

Edited March 23, 2011 by Rossi25

tius · March 23, 2011

Собственно, можно вообще без врапера.


<!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>Слои по горизонтали</title>
	<style type="text/css">
	.layer1 {
		background-color: #fc0;
		float: right;
		width: 30%;
		display: inline-block;
	}
	.layer2 {
		background-color: #c0c0c0;
		width: 50%;
		margin: 0 10%;
		float: right;
		display: inline-block;
	}
	</style>
</head>
<body>
	<div class="layer2">
	Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing
  	</div>
	<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>
	<p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate 
 	velit esse molestie consequat. amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna utem dolor in hendrerit in vulputate 
 	velit esse molestie consequat. amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aaliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d</p>
</body>
</html>

Совсем народ разленился.

Rossi25 · March 23, 2011

Спасибо, опять за идею, tius.

Но в Вашем примере ширина у желтого и серого блока получилась заданной в процентах, когда их ширина имеет фиксированное значение. Кроме того, задание margin у серого блока не позволяет придвинуть серый блок вплотную к желтому при минимальной ширине (или происходит "спрыгивание" желтого блока вниз).

Да, а обязательно изменять сво-во div'ам на display: inline-block;, это во всех браузерах работает?

Вот немного, изменил, добавив ещё wrapper'ов, но не идеально получилось (например, серый блок в черной рамке не ровно по центру располагается относительно красной рамки и правого края браузера)

<!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>Слои по горизонтали</title>
        <style type="text/css">

        .layer1 {
                background-color: #fc0;
                float: right;				
                width: 54%; 
                display: inline-block; /* работает ли это в IE6,7? */
		/* здесь, к сожалению, нельзя добавить min-width, иначе блок "уползает" вниз, под серый */
        }
        .layer2 {
                background-color: #c0c0c0;                
                margin: 0;
                float: right;
                display: inline-block;  /* работает ли это в IE6,7? */
		min-width: 240px;
		width: 46% !important; /* для IE6 */
		width: 240px; /* для IE6 */

        }
	.wrapper {
                min-width: 560px; 
		width: 100% !important; /* для IE6 */
		width: 560px; /* для IE6 */
        }
	.fixed-wrapper1 {
				border: 1px solid red;
				width: 300px;
	}
	.fixed-wrapper2 {
				border: 1px solid black;
				width: 240px;
	}
	.clear {
				clear: left; /* Отмена обтекания */
	}
	img {border:0px; background-color: #0f8;}
        </style>
</head>
<body>
<div class="wrapper">
        <div class="layer2">
		<div class="fixed-wrapper2">
			Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing
			Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipi...
		</div>
		</div>
        <div class="layer1">
		<div class="fixed-wrapper1">
			<img width="300" height="300" src="div4img.png" alt="изображение 300x300" />		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
        </div>
		</div>
        <p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate 
        velit esse molestie consequat. amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna utem dolor in hendrerit in vulputate 
        velit esse molestie consequat. amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aaliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d</p>
</div>
</body>
</html>

Рис.1. Ширина экрана увеличивается... Рис.2. Минимальная ширина.

Edited March 23, 2011 by Rossi25

Rossi25 · March 27, 2011

Может есть у кого-нибудь ещё идеи на эту тему, кроме js?

swetlana · March 27, 2011

Может есть у кого-нибудь ещё идеи на эту тему, кроме js?

обязательно будет, если всё-таки опишете понятно, что именно нужно.

Как для блондинок.

Sign In

Два блока(div) заданной шириной рядом по горизонтали + текст обтекает только один блок

Question

Rossi25

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

tius

Link to comment

Share on other sites

Rossi25

Link to comment

Share on other sites

tius

Link to comment

Share on other sites

Rossi25

Link to comment

Share on other sites

Rossi25

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information