Кажется, есть несколько сообщений на эту тему, но ни одно из решений не помогло мне.Возможно, кто-то может выяснить, чего мне не хватает.
У меня три поля плавали рядом друг с другом, как столбцы.Из-за определенных фоновых изображений и т. Д. Каждый блок состоит из двух элементов 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/
Заранее спасибо!