如何使div高度增加以包含浮動圖像

這是問題所在。我有一個div，其中包含幾段文字，然後是一個浮動正確的圖像。圖像浮動正確，但包含的div不會垂直擴展以適應圖像。我知道我可以手動設置div的高度，但這會變得有問題，因爲我想爲我的網站的每個頁面使用相同的div，因此高度需要不同。如何使div高度增加以包含浮動圖像

下面是一個代碼示例：

#main_contentbox { 
 
    width: 918px; 
 
    margin: 10px auto; 
 
    padding: 10px 20px 20px 20px; 
 
    background-color: #ffffff; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #000; 
 
} 
 

 
#main_contentbox img#sample { 
 
    float: right; 
 
}

<div id="main_contentbox"> 
 
    <h1 class="page"> The Event </h1> 
 
    <img id="sample" src="sample.jpg" /> 
 
    <p> 
 
    stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p> 
 

 
    <p>stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome! 
 

 

 
</div>

來源

2010-01-29 Dan

你可以改變的塊家長如何處理通過改變overflow財產內容抹灰的行爲。使用JavaScript也許

#main_contentbox { overflow: hidden; }

來源

2010-01-29 04:18:40 cletus

：o我怎麼能錯過那個.. +10（如果我可以）我總是用清晰的：兩種技術... – 2010-01-29 04:23:59

感謝芽，它的工作。 – Dan 2010-01-29 04:30:41

「overflow」的這個特殊功能並不是衆所周知的。 – cletus 2010-01-29 04:34:39

試一下：這應該這樣做

window.onload = FixMyDiv(); 

function FixMyDiv() 
{ 
    var divh = document.getElementById('main_contentbox').style.offsetHeight; 
    var imgh = document.getElementById('sample').style.offsetHeight; 

    if(divh < imgh + 50) document.getElementById('main_contentbox').style.height = imgh + 50; 


}

來源

2010-01-29 04:21:17

不要敲JavaScript，它絕對有它的位置，但我正在尋找一個純粹的CSS解決方案，因爲這是嚴格的設計和基於佈局的問題。 – Dan 2010-01-29 06:13:13

使用的:after僞類，你可以有一個名爲DIV自動附加一個明確的定位。添加到您的css文件：在地方

#main_contentbox:after { 
    content: "Foo"; 
    visibility: hidden; 
    display: block; 
    height: 0px; 
    clear: both; 
}

就這樣，你沒有做任何事情來迫使main_contentbox增長到包含它的花車，不管你是在什麼頁面。

來源

2010-01-29 05:11:03 monksp

我將不得不進一步研究這個問題，看起來用CSS有很多竅門或者快速修復的方法，但我關心的是學習正確的方法。 – Dan 2010-01-29 06:11:51

不確定什麼是符合「正確」做事方式的資格，但我在工作中使用了float a -lot，並且有以下幾個方面：在僞類之後，我從不需要在設計時考慮它。添加具有浮動類的元素，並且容器類始終知道要做正確的事情。清除似乎是一個相當常見的方式來實現這一點（我知道至少維基百科的默認皮膚用專門的清除類來做到這一點）。我的解決方案只是一個推斷。 – monksp 2010-01-29 14:47:06

雖然@克萊的解決方案在技術上是正確的，將溢出到比overflow: visible（默認值）以外的任何值，initial（明確使用默認值），或inherit有visible父將導致要素創建一個新的block formatting context。塊格式化上下文是浮動元素可以與塊進行交互的區域。這種情況（浮動非溢出的內部元素：可見元素）被明確列爲創建一個新的上下文是一個必然的原因：

「如果浮動與滾動元件相交會強行重新包內容，每次滾動後都會發生重新包裝，導致滾動體驗變慢。「 - mdn

因此，將在此新環境中爲直接子女重新計算身高，並將其高度包括在內。

我更喜歡使用overflow: auto當我可以做到這一點，但scroll，overlay，或hidden都會產生包括在父元素的高度的計算浮子的期望的結果。

來源

2016-02-08 22:12:06 MaxPRafferty

謝謝你。 @ cletus的答案奏效，但我不知道爲什麼。 – Gopherkhan 2017-01-17 19:02:39

如何使div高度增加以包含浮動圖像

回答

相關問題