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

Я хочу, чтобы внешний 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>

How to achieve this?


html css css-float
person Jase Whatson    schedule 30.04.2009    source источник

Ответы (7)


arrow_upward
170
arrow_downward

Вы можете установить CSS outerdiv на это

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

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

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

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

person alex    schedule 30.04.2009
comment
Хотел бы я понять логику того, почему overflow: hidden работает в этом случае. - person masteroleary; 30.08.2013
comment
Да, я надеялся, что не только мне это показалось нелогичным. Алекс? - person regularmike; 30.08.2013
comment
@regularmike Я однажды прочитал объяснение, я буду следить за ним и дам ссылку, если найду. - person alex; 31.08.2013
comment
@masteroleary @regularmike HTML/CSS никогда не была хорошей технологией пользовательского интерфейса, поэтому нелогичные вещи в ней довольно распространены :) - person Yuriy Nakonechnyy; 08.11.2013
comment
@masteroleary Я понимаю, что это старая ветка, но недавно я пытался ответить на аналогичный вопрос в stackoverflow.com/questions/21041297#21041625 -- надеюсь, это поможет - person xec; 12.01.2014
comment
+1 за решение float. Очень хорошо работает с другими сбоями, особенно в паре с Twitter Bootstrap. - person Fizzix; 01.05.2014
comment
@regularmike CSS нелогичен? Никогда! - person A.R.; 30.12.2015
comment
Что делать, если вы не можете скрыть переполнение? В моем случае содержимое просто скрыто на экране ... не может прокручиваться вниз, даже если есть содержимое. - person nclsvh; 26.07.2016
comment
@NicolasV В абзаце ниже примера CSS есть альтернативное решение. - person alex; 26.07.2016
comment
@alex Должен был заметить, что я тоже пробовал это решение. Не повезло - person nclsvh; 26.07.2016

arrow_upward
17
arrow_downward

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

Отработав ответ Алекса (и исправление Гаррета) о «добавлении элемента в конце с помощью 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 не так хорош).

person Lycana    schedule 30.04.2009
comment
Почему меня понизили? Это работает, и я справедливо признал, что это не самое лучшее решение. - person Lycana; 30.04.2009
comment
Я не уверен, я поставил +1, чтобы вернуть вас хотя бы к 0. Возможно, за вас проголосовали, потому что вы не исправили его неправильный CSS... то есть использование знака равенства для установки свойства CSS неверно. - person alex; 30.04.2009
comment
справедливо. Я ценю +1 Алекс. Я думал, что мое заявление было справедливым. - person Lycana; 30.04.2009
comment
Это решение лучше ИМО. Я бы принял этот ответ, если бы это был мой вопрос. - person ksg91; 20.09.2012

arrow_upward
8
arrow_downward

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

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

person DarkWulf    schedule 30.04.2009
comment
скрытый работает, но вы правы, авто работает немного лучше. Спасибо. - person Matthew Setter; 01.05.2012

arrow_upward
7
arrow_downward

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

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

person Nande    schedule 11.10.2013
comment
внешний div использует display: table; а внутри div используйте display: table-cell; - person Anukul Limpanasil; 29.02.2020

arrow_upward
4
arrow_downward

Прежде всего, вы не используете 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 делает для ее решения. .

person Garrett    schedule 30.04.2009

arrow_upward
3
arrow_downward

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

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

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}
person Harpal    schedule 20.12.2010
comment
Излишество, когда вы можете сделать это только с помощью CSS. - person alex; 06.01.2011
comment
С моим ответом вы можете установить родительскую высоту так же, как дочернюю высоту, но с помощью переполнения мы не меняем родительскую высоту, что создаст некоторые проблемы, если мы показываем данные после родительского div. - person Harpal; 13.05.2011

arrow_upward
1
arrow_downward

Используйте 1_

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

person RonanCodes    schedule 07.02.2013