Right Float и контейнер Div - PullRequest
Новая
       24

Right Float и контейнер Div

0 голосов
/ 31 марта 2009

У меня есть 3 div в контейнере div. Первый всплывает влево, второй всплывает вправо, а последний сидит в центре. Это создает примерно 3 четных деления для контейнера div.

В каждом из этих элементов я размещаю изображение различной высоты. Тогда есть отдельный div, который будет находиться ниже контейнера div, который будет полной шириной (назовите его description div).

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

ПРИМЕЧАНИЕ: я пытаюсь сделать это без использования абсолютных значений, только проценты. Поэтому я не хочу объявлять абсолютную высоту для контейнера div! Кроме того, clear'ы не будут работать, так как это упрощено, и на самом деле вокруг всего этого и т. Д. Есть много других контейнеров div, если только вы не можете очистить только числа с плавающей точкой в ​​вышеуказанном вложенном div.

Вот код: 

<html>
<head>
    <style>
        #b_pics {
            border: 2px solid grey;
            width: 100%;
        }
        #b_pic1 {
            border: 0px solid grey;
            float:left;
            width:33%;
        }
        #b_pic2 {
            border: 0px solid grey;
            margin: 0px auto;
            width: 33%
        }
        #b_pic3 {
            border: 0px solid grey;
            float:right;
            width:33%;
        }
        #b_website {
            border: 1px solid grey;
            width:100%;
        }
    </style>
</head>
<body>
    <div id='b_pics'>
        <div id='b_pic1'>
            Image 1 here    
        </div>
        <div id='b_pic3'>
            Image 3 here            
        </div>
        <div id='b_pic2'>
            Image 2 here                    
        </div>
    </div>
    <div id='b_website'>
        Line of text goes here
    </div>
</body>

Заранее благодарен за любую помощь, стараясь сохранить любые волосы, которые остались в моей голове!

Ответы [ 4 ]

1 голос
/ 31 марта 2009

Содержащий элемент не будет растягиваться для размещения плавающих элементов div. В вашем примере содержащийся div не имеет фактического содержимого и, таким образом, будет иметь высоту 0 пикселей. Попробуйте изменить границу или цвет фона, чтобы проиллюстрировать это.

Вы можете заставить элемент находиться ниже любого плавающего элемента div, назначив ему стиль: 

clear: both;

Вы также можете очистить только плавающие деления влево или вправо.

Вы можете добавить пустой div после трех div с изображениями, которые имеют этот стиль, чтобы растянуть контейнер b_pics для размещения плавающих элементов, или вы можете просто сделать div b_website очистить оба.

0 голосов
/ 30 июля 2013

Объяснение SpoonMeiser правильно. Вот код, который должен работать для вас. По сути, я добавил пустой div с «clear: both» в конце вашего контейнера div. Это заставляет контейнер занимать пространство плавающих элементов div, которые он содержит.

Это лучше, чем сделать div #b_website "clear: both" (альтернативное предложение SpoonMeiser), потому что это приведет к отображению div #b_website в правильном месте, но не заставит границу #b_pics окружать плавающие div. 1003 * 

<div id='b_pics'>
    <div id='b_pic1'>
        Image 1 here</div>
    <div id='b_pic3'>
        Image 3 here
    </div>
    <div id='b_pic2'>
        Image 2 here
    </div>
    <div style="clear:both;"></div>
</div>
<div id='b_website'>
    Line of text goes here
</div>

Надеюсь, это поможет?

0 голосов
/ 05 ноября 2009

Я полностью согласен с ответом SpoonMeiser. У меня была та же проблема (только с IE), и я добавил ясное: оба (div в моем случае) - единственное решение, которое работает.

0 голосов
/ 31 марта 2009

Дайте этот выстрел. Ничто не запрограммировано, и оно должно делать то, что вы хотите.

...