Сделайте так, чтобы внешний div автоматически имел ту же высоту, что и его плавающее содержимое
Вопрос
Я хочу внешнего 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;
Я потратил больше недели, пытаясь разобраться в этом!