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

StackOverflow https://stackoverflow.com/questions/804926

  •  03-07-2019
  •  | 
  •  

Вопрос

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

<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>

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

Это было полезно?

Решение

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

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

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

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

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

Другие советы

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

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

    <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 не так хорош).

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

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

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

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

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

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

<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 делает для ее разрешения.

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

Установите родительскую высоту = Дочерней offsetHeight.

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

Использование clear: both;

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top