Question

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

我有三个盒子像柱子一样漂浮在一起。由于某些背景图像等，每个框由两个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

它们没有浮动，它们绝对定位。

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

Answer 2

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

display: inline-block;

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

Answer 3

.calloutbox {
    white-space:nowrap;
}

应该做的伎俩。否则尝试创建一个jsfiddle，这样我们就可以运行你的代码了

浮动的div不会扩展以适应动态内容

3 个答案: