Ответ 1
Вам нужно использовать clear:both;
на вашем # content2 div
Если вы действительно хотите узнать все о поплавках, ознакомьтесь с этим удивительным учебником: http://css.maxdesign.com.au/floatutorial/
<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. Как я могу держать их отдельно?
Вам нужно использовать clear:both;
на вашем # content2 div
Если вы действительно хотите узнать все о поплавках, ознакомьтесь с этим удивительным учебником: http://css.maxdesign.com.au/floatutorial/
Используйте clear:both;
для вашего контента # 2
Применить
#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>
Вы забыли закрыть свой <div id="images1">
:)
использовать 'clear: both' в content2 div
Надеюсь, вам нужно добавить еще один div до <div id="content2">Text 2</div>
, который будет <div style="clear:both;"></div>
очистите ваши поплавки. Вот статья, описывающая, что происходит: Очистка плавающего элемента
Вы не закрыли <div id="images1">
. Если этот div закрыт, а div div содержимого arenot оставлен, он должен работать.
overflow:hidden
на вашем контенте content1 он будет расширяться, чтобы включить всех плавающих детей. (Конечно, это скроет неплавающие переполненные содержимое.)