Как заставить HTML-div перейти под другой div?

<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. Как я могу держать их отдельно?

Ответы

Ответ 1

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

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

Ответ 2

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

Ответ 3

Применить

#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>

Ответ 4

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

Ответ 5

использовать 'clear: both' в content2 div

Ответ 6

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

Ответ 8

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

Ответ 9

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