плавающий внутренний <div>вытекает из окружающего <div> - PullRequest
Новая
       3

плавающий внутренний <div>вытекает из окружающего <div>

2 голосов
/ 17 января 2011

Пожалуйста, помогите мне понять, почему image - div следующего кода вытекает из box - div. 

<body>
    <div id="box" style="border: 2px solid green;">
            <div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
            <div id="text" style="background: yellow;">This is some text</div>
    </div>
</body>

Другими словами, я ожидал, что зеленыйграницы, чтобы полностью охватить как внутренние div с, а не только желтый.

Ответы [ 4 ]

5 голосов
/ 17 января 2011

Когда дочерние элементы плавают, родитель не переносит их. Для этого вы можете использовать два решения: 

#box{
     overflow:hidden;
}

Или 

#box{
     float:left;
}

Вы также можете использовать display:inline-block для #box, но это не работает в IE6

2 голосов
/ 17 января 2011

установка переполнения на скрытый - не всегда идеальное решение, так как если у вас есть контент, который больше контейнера, он не будет отображаться.

путем добавления очищающего элемента в нижней части контейнера, вы должны увидеть, что плавающие элементы помещаются внутри родительского элемента. 

<body>
    <div id="box" style="border: 2px solid green;">
            <div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
            <div id="text" style="background: yellow;">This is some text</div>

            <div style="clear: left; height: 0; margin: 0; padding: 0"></div>
    </div>
</body>

Очевидно, вы захотите создать универсальный класс для этого и установить CSS во внешней таблице стилей - но принцип работает.

0 голосов
/ 17 января 2011

Вы должны использовать элемент для «очистки» всплывающего объекта, используя style="clear: left;"

0 голосов
/ 17 января 2011

Плавающие элементы могут выходить за пределы родительского элемента. Чтобы сохранить плавающий элемент внутри содержащего элемента, вам необходимо добавить пустой элемент в конце, который очищает плавающий элемент:

Итак, внутри элемента с id="box" добавьте что-то вроде этого: 

<div style="clear: left;"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...