浮動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不會擴展到適合動態內容

回答

相關問題