Как остановить движение <div>s друг к другу с заданным значением float?

Question

Очень простой вопрос CSS, на который я так и не смог найти ответ:

Я пытаюсь выложить страницу с двумя элементами div рядом друг с другом в одном ряду (используя float: left; и float: right;), а затем один элемент div под ними. Проблема в том, что если верхняя строка (определяемая как сам div) настолько широка, что пространство между двумя div может вместить нижний div, нижний div перемещается вверх в верхний ряд, создавая видимость одного ряда из трех div , Я не знаю, ясно это или нет, но вот код:

<div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

Итак, как и выше, поскольку верхний элемент div имеет промежуток в 200 пикселей между левым и правым дочерними элементами, изображение в нижнем элементе скользит вверх между ними. Если я сделаю ширину верхнего div 399px, этого не произойдет. Я попытался использовать CSS «clear» свойство, но это не решило проблему. Я всегда просто обходил это, на первый взгляд, странное поведение неаккуратным образом, но хочу найти лучшую практику.

Любая помощь или направление с благодарностью!

Answer 1

Используйте overflow:auto в первом div

<div id="top div" style="width:400px;overflow:auto;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

, это приведет к расширению контейнера div до содержимого его дочерних элементов, поэтому следующий div сохранит свое местоположение.

Answer 2

Попробуйте атрибут clear в новом div:

<div id="top_div" style="width:400px;"> 
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div> 
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div> 
<div style="clear: both;" />
</div> 

<div id="bottom_div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

Answer 3

Я бы добавил div для очистки поплавков:

<div id="top div" style="width:400px;">
<div style="float:left;"><img src="images/xlab.jpg" width="100px" height="200px" /></div>
<div style="float:right;"><img src="images/ucbseal.jpg" width="100px" height="250px" /></div>
<div style="clear:both;"></div>
</div>

<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>

Answer 4

Надеюсь, еще не поздно, но у меня возникла та же проблема, и я только что понял это. Имеет отношение к нижней Div. Установите высоту и ширину на 100% для нижнего блока и также установите автоматический переполнение для нижнего блока. Теперь div не будет двигаться вверх, чтобы заполнить пространство.

Answer 5

Я думаю, что приведенные выше предложения относительно style = "clear: both;" точны. Тем не менее, я мог бы попытаться добавить этот стиль в ваш существующий div "нижней строки". Это может спасти вас, добавив новый div.