浮动div不会扩展到适合动态内容

看来有关此主题的几个帖子，但没有解决方案为我工作。也许有人可以弄清楚我错过了什么。浮动div不会扩展到适合动态内容

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

谢谢！

来源

2012-02-27 Danielle C

他们不漂浮，他们是绝对定位。

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

来源

2012-02-27 22:05:29

使用浮动可能是一种痛苦。作为替代，你试图使用使用inline-block的：

display: inline-block;

它像一个内联元素，而是像块级元素的样式。但它在IE6中不起作用。

来源

2012-02-27 22:09:57 koenpeters

.calloutbox { 
    white-space:nowrap; 
}

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

来源

2012-08-08 17:08:19

浮动div不会扩展到适合动态内容

回答

相关问题