自動調整高度和嵌套div的小CSS問題

Question

因此，我終於學習了更多的CSS方法，並遇到了一個小問題。我有一個容器div，裏面有幾個div，其中一個是文本（可以是隨機高度）和一個MAX高度爲200px的圖片。

我在他們後面使用了虛線/彩色背景，需要自動展開到最高的文字或圖像的高度。現在，當我使用高度：自動對容器div它適用於隨機高度文本的完美：Example Screenshot

但它只是根據文本的高度進行調整;如果圖像比文字高，則圖像會溢出背景虛線/彩色框的底部。 Example Screenshot

我使用的是目前CSS是這樣的：

h1 div#like_detailed { 
    margin: 0; 
    font-size: 1.1em; 
    width: 700px; 
} 

#details-image img { 
    border: none; 
    clear: left; 
    float: right; 
    margin: -45px 0 0 0; 
    max-height: 200px; 
    padding: 0 7px 0 10px; 
} 

#deets-container { 
    background-color: #FEF; 
    border: #190AE7 1px dotted; 
    height: auto; 
    margin-top: 0; 
    margin-bottom: 30px; 
    padding-top: 10px; 
    padding-right: 10px; 
    padding-left: 10px; 
    padding-bottom: 0; 
} 

併爲它的HTML是這樣的：

<div id="deets-container" class="rounded"> 
<!-- Button --> 
<div class="likebtnframe">(some code)</div> 
<!-- Button --> 
<div class="tweetbtnframe">(some code)</div> 
<!-- Button --> 
<ul id="share"> 
<li><a name="share">(some code)</a></li> 
</ul> 
<!-- Submitted By --> 
<div class="submitter_detailed"><span class="submitter-color smalltext">(some code)</span> (some code)</div> 
<!-- Image --> 
<div id="**details-image**">(some code)</div> 
<!-- Like/Quote --> 
<h1 id="**like_detailed**">(some code)</h1> 
</div> 

我有一種感覺，這是很容易的，但我跑花時間自行整理。

有人嗎？

Answer 1

問題是你有沒有清除您的DIV包含您的浮動圖像。最好的解決方案是使用clearfix。

以下內容添加到您的樣式表：

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 

任何含有浮動元素總是需要當然，除非你設置該元素的固定高度被清除。

現在，從這個改變你的HTML：

<div id="deets-container" class="rounded"> 

這樣：

<div id="deets-container" class="rounded clearfix"> 

我希望我幫助。

Answer 2

發生這種情況是因爲您正在＃details-image內部浮動img元素。

當一個元素被浮動時，它的包含元素會有效地忽略它，除非它也是浮動的。因此，當你浮動圖像時，含有的div不再將其作爲其內容的一部分進行計算，因此不包括其高度。

有來處理這一點，我想用一招：

div.anchor { 
    float:none; 
    clear:both; 
    line-height:0; 
    font-size:0; 
} 

現在添加這些錨的div 的一個立即你的img元素之後，並在其中包含非中斷空格（一些如果瀏覽器完全爲空，瀏覽器將不會呈現它）。

<div id="details-image"> 
    (some code) 
    <img src="path/to/your/image.jpg" /> 
    <div class="anchor">&nbsp;</div> 
</div> 

這工作，因爲加入了「清」的元素，你強迫它被包含浮動元素，而是通過設置浮動：沒有，你這是它的非浮動父承認它，包括它也是如此。 clear屬性將清除浮動元素並在其後進行渲染，並且由於行高和字體大小爲0，因此不會添加任何額外的高度。我知道這一切聽起來很奇怪，但一直都是這樣，我在無表格佈局中一直使用這種方法，並且有很多浮動div。

參考：這裏是從列表中great read相距約CSS花車

Answer 3

浮動「殺死」的高度計算莫名其妙：http://css-tricks.com/all-about-floats/ 解釋了爲什麼（我發現這裏對堆棧），並解釋鋤「清」工作