Как сделать внутреннюю попытку отделения внешнее отделение вниз
Предположим, что у меня есть отделение. В этом отделении я имею два плавания отделений в запасе, друг прямо рядом с другом, я верю. Покинутое отделение для изображения. По некоторым причинам, когда изображение слишком высоко, оно не продвигает внешнее отделение соответствовать изображению. Вместо этого изображение просто продолжает идти на свое собственное и идет "вне" нижней границы внешнего отделения. Как я могу сделать его так, чтобы изображение развернуло внешнее отделение также?
<div>
<div class="left">
</div>
<div class="right">
</div>
</div>
3 ответа
добавление либо « overflow: auto; », либо « overflow: hidden; » в содержащий div: оба хороших решения (каждое со своими причудами в зависимости от конкретного сценария, но очень надежное). Вам нужно будет добавить hasLayout, чтобы это работало в IE. Проще всего добавить:
.container {
overflow: hidden;
display: inline-block; /* triggers hasLayout in IE */
}
.container {
display: block; /* back to block */
}
Дополнительные параметры здесь: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
<div style="overflow: auto">
<div class="left">
</div>
<div class="right">
</div>
</div>
Если у вас есть div с двумя элементами, самый большой, который не плавает, будет толкать внешний div. Если у вас есть div с двумя плавающими элементами, вам понадобится div с clear:both, чтобы все было сдвинуно вниз.