css - float div 不会扩展以适应动态内容

Question

似乎有几篇关于这个主题的帖子，但没有一个解决方案对我有用。也许有人可以弄清楚我错过了什么。

我有三个盒子像柱子一样并排 float 。由于某些背景图片等原因，每个盒子由两个div组成。外部 div 具有类“calloutbox”并且向左浮动。 “calloutbox”内部是另一个名为“callout-content”的 div，它包含动态内容(我使用的是 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>​

这是CSS:

    .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/

提前致谢!

Answer 1

它们不是 float 的，它们是绝对定位的。

绝对定位的元素不再是布局的一部分。就布局而言，他们不再有 parent 。因此，您需要以像素而不是百分比来指定它们的大小。百分比是相对于他们不再拥有的 wrapper 而言的。