Сделать внешний div автоматически той же высоты, что и его плавающее содержимое


95

Я хочу, чтобы внешний вид divбыл черным, чтобы обернуть его divплавающим внутри. Я не хочу использовать style='height: 200pxв divс outerdivидентификатором, так как я хочу, чтобы он автоматически был высотой своего содержимого (например, плавающий divs).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

Как этого добиться?

Ответы:


168

Вы можете установить outerdivCSS для этого

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

Вы также можете сделать это, добавив элемент в конце с clear: both. Это может быть добавлено обычным образом с помощью JS (не лучшее решение) или :afterпсевдоэлемента CSS (широко не поддерживается в старых IE).

Проблема в том, что контейнеры естественным образом не расширяются, чтобы включать в себя плавающих потомков. Будьте осторожны при использовании первого примера: если у вас есть дочерние элементы за пределами родительского элемента, они будут скрыты. Вы также можете использовать auto в качестве значения свойства, но это вызовет полосы прокрутки, если какой-либо элемент появится снаружи.

Вы также можете попробовать переместить родительский контейнер, но в зависимости от вашего дизайна это может быть невозможно / сложно.


37
Хотел бы я понять логику того, почему в этом случае работает overflow: hidden.
masteroleary

2
Да, я надеялся, что не только я думал, что это противоречит интуиции. Алекс?
regularmike

3
@masteroleary @regularmike HTML/CSSникогда не был хорошей технологией пользовательского интерфейса, поэтому нелогичные вещи в нем довольно распространены :)
Юрий Наконечный

2
@masteroleary Я понимаю, что это старый поток, но недавно я попытался ответить на аналогичный вопрос на stackoverflow.com/questions/21041297#21041625 - надеюсь, это поможет
xec

1
+1 за floatрешение. Очень хорошо работает с остальными, особенно в паре с Twitter Bootstrap.
Fizzix

17

Во-первых, я настоятельно рекомендую вам делать стили CSS во внешнем файле CSS, а не встраивать их. Его намного проще поддерживать, и его можно использовать повторно с помощью классов.

Отработав ответ Алекса (и clearfix Гаррета) о «добавлении элемента в конце с помощью clear: both», вы можете сделать это так:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Это работает (но, как видите, встроенный CSS не такой красивый).


Почему мне понизили рейтинг? Это работает, и я справедливо признал, что это не очень хорошее решение.
Lycana

1
Я не уверен, я бы поставил +1, чтобы вернуть вас хотя бы к 0. Возможно, вас проголосовали против, потому что вы не исправили его неправильный CSS ... т.е. использование знака равенства для установки свойства CSS неверно.
Alex

справедливо. Я ценю +1 alex. Я думал, что это мое заявление было справедливым.
Lycana

Это решение лучше IMO. Я бы принял этот ответ, если бы это был мой вопрос.
ksg91

8

Вы можете попробовать самозакрывающиеся поплавки, как описано на http://www.sitepoint.com/simple-clearing-of-floats/

Так что, возможно, попробуйте либо overflow: auto(обычно работает), либо overflow: hidden, как сказал Алексей.


скрытый работает, но вы правы, авто работает немного лучше. Спасибо.
Мэтт Сеттер

7

Я знаю, что некоторые люди меня возненавидят, но я нашел display:table-cellспособ помочь в этом случае.

Это действительно чище.


внешний div использовать display: table; а внутри div используйте display: table-cell;
Анукул Лимпанасил

4

Прежде всего, вы не используете width=300pxэту настройку атрибута для тега, а не CSS, используйте width: 300px;вместо этого.

Я бы посоветовал применить эту clearfixтехнику на #outerdiv. Clearfix - это общее решение для очистки 2 плавающих div, поэтому родительский div будет расширяться для размещения 2 плавающих div.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Вот пример вашей ситуации и того, что Clearfix делает для ее решения.


3

Используйте jQuery:

Установите Parent Height = Child offsetHeight.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

3
Перебор, когда это можно сделать только с помощью CSS.
Alex

1
С моим ответом вы можете установить родительскую высоту так же, как дочернюю высоту, но, используя переполнение, мы не меняем родительскую высоту, что создаст некоторые проблемы, если мы будем показывать данные после родительского div.
Harpal

1

Использовать clear: both;

Я потратил больше недели, пытаясь понять это!

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.