Как остановиться <отделение> s от перемещения друг в друга с определенным плаванием?
Очень простой вопрос о CSS, на который я не был в состоянии найти ответ до сих пор:
Я пытаюсь разметить страницу с двумя отделениями бок о бок в одной строке (использующий float:left; и float:right;) и затем одно отделение ниже их. Проблема состоит в том, что, если верхний ряд (определенный как само отделение) так широк, что пространство между этими двумя отделениями может разместить нижнее отделение, нижнее отделение перемещается вверх в верхний ряд, создающий видимость одной строки трех отделений. Я не знаю, ясно ли это или нет, но здесь является кодом:
<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>
Так, как выше, так как у главного отделения есть разрыв на 200 пкс, промежуточный его левые и правые дочерние элементы, изображение в нижних слайдах отделения между ними. Если я делаю ширину главного отделения 399 пкс, которого не происходит. Я пытался использовать CSS "ясное" свойство, но это не решило проблему. Я всегда только что прокладывал себе путь вокруг этого по-видимому нечетного поведения неаккуратным способом, но хочу найти лучшую практику.
Любая справка или направление значительно ценятся!
4 ответа
Используйте 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 сохранит свое местоположение ..
Попробуйте использовать атрибут '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>
Я думаю, что вышеприведенные предложения, касающиеся стиля ="clear:both;" - на месте. Однако, я могу попробовать добавить этот стиль в ваш существующий "нижний ряд" 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 style="clear:both;"></div>
</div>
<div id="bottom div"><img src="images/xlab.jpg" width="200px" height="200px" /></div>