Плавающие div не будут расширяться, чтобы соответствовать динамическому контенту - PullRequest
0 голосов
/ 28 февраля 2012

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

У меня три поля плавали рядом друг с другом, как столбцы.Из-за определенных фоновых изображений и т. Д. Каждый блок состоит из двух элементов div.Внешний div имеет класс calloutbox и перемещается влево.Внутри "calloutbox" находится другой div, называемый "callout-content", который содержит динамический контент (я использую wordpress).

До сих пор я не смог заставить коробки расширяться, чтобы соответствовать их динамическисгенерированный контент.Они рухнут, если я установлю высоту на 100%.Я попробовал дюжину комбинаций переполнения: скрытый, прозрачный: оба и т. Д. Без удачи.

<div id="callout-container">
   <div class="calloutbox">
     <div class="callout-content">Dynamic content goes here</div>
   </div>
   <div class="calloutbox">
     <div class="callout-content"></div>
   </div>
   <div class="calloutbox">
     <div class="callout-content"></div>
   </div>
</div>​

Вот код:

    .calloutbox {
    min-height:310px;
    width:30%;
    float:left;
    margin:0 0 0 25px;
    position:relative;
    background-image:url(images/shadow.png);
    background-repeat:no-repeat;
    background-position:right bottom;
    display:block;

}

.calloutbox:after {
    clear:both;
}

.callout-content:after {
    clear:both;
}

.calloutbox:nth-child(1) {
    min-height:200px;
}

/*The content inside the three boxes on the homepage */
.callout-content {
    height:100%;
    width:90%;
    right:8px;
    border:1px solid #e6e4e4;
    bottom: 8px;
    background-color:white;
    position:absolute;
    background-image:url(images/yellow-title-bar.png);
    background-repeat:repeat-x;
    background-position:top;
    padding: 0 10px 10px 10px;
}
​

Вот код в jsfiddleесли это кому-нибудь поможет: http://jsfiddle.net/daniec/r8ezY/

Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 28 февраля 2012

Работа с поплавками может быть болезненной.В качестве альтернативы вы пытались использовать inline-block:

display: inline-block;

Он ведет себя как встроенный элемент, но стилизован как элемент уровня блока.Это не работает в IE6, хотя.

1 голос
/ 28 февраля 2012

Они не плавающие, они абсолютно позиционированы .

Абсолютно позиционированные элементы больше не являются частью макета.У них больше нет родителей, насколько это касается макетов.Поэтому вам нужно указывать их размеры в пикселях, а не в процентах.Проценты указаны относительно упаковок, которых у них больше нет.

0 голосов
/ 08 августа 2012
.calloutbox {
    white-space:nowrap;
}

Должен сделать свое дело. в противном случае попробуйте создать jsfiddle, чтобы мы могли запустить ваш код

...