it-swarm.com.ru

Как соответствовать росту div, чтобы обернуть вокруг его плавающих детей

У меня есть div, обернутый вокруг двух детей, один плавал влево, а другой справа. Я хочу поместить рамку и фон вокруг детей, но у div есть высота 0, так как он не изменяет размер, чтобы соответствовать детям.

Вот пример этого в действии: http://jsfiddle.net/VVZ7j/17/

Я хочу, чтобы красный фон полностью опустился. Я пробовал высоту: авто, но это не сработало.

Любая помощь будет оценена, спасибо.

Постскриптум Я не хочу использовать JavaScript, если это возможно.

27
user1447371

Это распространенная проблема при работе с поплавками. Есть несколько общих решений, которые я заказал по личным предпочтениям (лучший подход в первую очередь):

  1. Используйте псевдоэлемент :: after CSS. Это известно как «clearfix», и работает IE8 и выше. Если вам нужна совместимость с более ранними версиями IE, этот ответ должен помочь . Пример .

    .parentelement::after {
        content: "";
        display: table;
        clear: both;
    }
    
  2. Добавьте два числа с плавающей точкой в ​​контейнер с атрибутом CSS overflow: auto или overflow: hidden. Однако такой подход может вызвать проблемы (например, когда всплывающая подсказка перекрывает края родительского элемента, появится полоса прокрутки). Пример .

    <div style="overflow: auto">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  3. Добавьте заданную высоту к родительскому элементу. Пример .

    <div style="height: 200px">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  4. Сделайте родительский элемент плавающим. Пример .

    <div style="float: left">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  5. Добавьте div после чисел с помощью clear: both. Пример .

    <div style="float: left"></div>
    <div style="float: left"></div>
    <div style="clear: both"></div>
    
60
jacktheripper

Добавьте overflow: hidden; в #wrap. Это clear fix. Вот некоторая документация об этом: http://positioniseverything.net/easyclearing.html

Л.Е .: Есть также несколько способов добиться этого, в зависимости от совместимости браузера:

  1. Добавить переполнение: скрыто в родительский контейнер.

#wrap { overflow: hidden; }

  1. Используйте псевдоэлемент для добавления clear: both.

#wrap:after { clear: both; content: ""; display: table;}

  1. Наиболее часто используемая техника - добавить дополнительный в качестве последнего элемента родительского контейнера.

<div style="clear:both"></div>

Я предпочитаю not использовать третий, когда вы получаете дополнительную разметку HTML.

5
BebliucGeorge

Попробуйте добавить overflow: hidden к вашему #wrapdiv.

3
Jim

Я пришел, чтобы начать использовать это решение "micro-clearfix" от Николаса Галлахера.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

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

2
jmbertucci

Просто добавьте еще один div с style clear: both перед закрытием внешнего div, т.е. здесь "wrap"

--Образец кода--

<div id="wrap">
    <div id="left">
        <p>some content at left</p>
    </div>
    <div id="right">
        <p>some content at right</p>
    </div>
    <div style="clear:both"></div>
</div>
0
vikrantx