Как сделать так, чтобы HTML-div перешел под другой div? - PullRequest
17 голосов
/ 07 июня 2011
<html>
<body>
<div id="content1">
    <div id="text1">This text floats left</div>
    <div id="images1"><img src="img.jpg" /></div> <!--Floats right-->
</div>
<div id="content2">Text 2</div>
</body>
</html>

Когда я пытаюсь сделать это, и пытаюсь создать макет, такой как таблица с двумя строками, с текстом, плавающим влево, и изображением, плавающим справа в верхнем ряду, все, что появляется, это то, что content2-div врезается в content1-div. Как я могу держать их отдельно?

Ответы [ 9 ]

19 голосов
/ 07 июня 2011

Вам нужно использовать clear:both; в вашем # content2 div

Если вы действительно хотите узнать все о поплавках, посмотрите этот удивительный урок: http://css.maxdesign.com.au/floatutorial/

2 голосов
/ 07 июня 2011

Применение:

#images1{
 float:right;   
}

#content2{
 clear:both;   
}

и исправьте свою HTML-разметку

<div id="images1"><img src="img.jpg" /> <!--Floats right-->

закройте div:

<div id="images1"><img src="img.jpg" /> <!--Floats right--></div>
2 голосов
/ 07 июня 2011

Используйте clear:both; в вашем контенте # 2

0 голосов
/ 07 июня 2011

overflow:hidden в вашем контенте content1 расширит его, включив в него все плавающие дочерние элементы. (Разумеется, это позволит скрыть неперемещенный переполненный контент.)

0 голосов
/ 07 июня 2011

Вы не закрыли <div id="images1">.Если этот div закрыт и div содержимого не смещены влево, он должен работать.

0 голосов
/ 07 июня 2011

очистить ваши поплавки.Вот статья, описывающая, что происходит: Очистка элемента с плавающей запятой

0 голосов
/ 07 июня 2011

Надеюсь, вам нужно добавить еще один div перед <div id="content2">Text 2</div>, который будет <div style="clear:both;"></div>

0 голосов
/ 07 июня 2011

используйте 'clear: both' для content2 div

0 голосов
/ 07 июня 2011

Вы забыли закрыть свой <div id="images1">:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...