Css 浮动divs赢得'；t扩展以适应动态内容

似乎有好几篇关于这个话题的帖子，但没有一篇对我有效。也许有人能找出我遗漏了什么

我有三个盒子像柱子一样挨着浮动。由于某些背景图像等原因，每个框由两个div组成。外部div具有类“callout box”，并向左浮动。“callout box”的内部是另一个名为“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>​

以下是JSFIDLE中的代码，如果这对任何人都有帮助：

---

提前谢谢

它们不是浮动的，而是绝对定位的

---

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

使用浮动可能会很痛苦。作为替代方案，您是否尝试使用内联块：

display: inline-block;

它的行为类似于内联元素，但它的样式可能类似于块级元素。但它在IE6中不起作用

.calloutbox {
    white-space:nowrap;
}

我们应该做到这一点。否则，请尝试创建一个JSFIDLE，以便我们可以运行您的代码

.calloutbox {
    white-space:nowrap;
}