HTML - 煩惱與div的

有父塊：HTML - 煩惱與div的

#content 
{ 
position: relative; 
width: 92%; 
margin: 0 auto; 
height: 100%; 
min-height: 500px; 
border: 1px solid red; 
}

我需要2塊吧：

#news 
{ 
position: relative; 
float: left; 
min-height: 400px; 
width: 290px; 
height: 100%; 
} 
#text 
{ 
position: relative; 
float: left; 
margin-left: 20px; 
min-height: 400px; 
width: 625px; 
height: 100%; 
}

 <div id="content"> 
      <div id="news"> 
       ... 
      </div> 
      <div id="text"> 
       ... 
      </div> 
     </div>

但第二個文本塊不在一個符合新聞。而且，在調整新聞和文本塊的大小後，內容塊也應調整大小，但它不會......爲什麼？

來源

2009-12-04 Ockonal

這是因爲＃內容中的div都浮動，將它們從正常文檔流中移出。在#content上，將height: 100%;更改爲overflow: hidden; - 這應該使它適應其中的浮動元素。

來源

2009-12-04 13:40:07

overflow：hidden;正是這一點，我需要的高度和浮動div，但你可以再看看那個頁面，現在內容塊已經改變了它的位置，爲什麼？ – Ockonal 2009-12-04 13:52:29

看起來像#head_float_layer div的相對位置正在導致這個問題，因爲＃內容已被正確定位。嘗試將#head_float_layer更改爲：＃head_float_layer {background_ image：url（../ images/head_layer.png）; height：336px; margin：0; 填充：0; position：absolute; right：100px; top：0; width：448px; z-index：9999; } 如果您不希望圖像重疊得太多，您需要添加儘可能多的邊距以滿足您的需求＃ – 2009-12-04 14:15:12

非常感謝！我並不認爲這是由於head_float_layer造成的。我已經解決了我的問題！ – Ockonal 2009-12-04 14:24:21

您可能需要添加：

display:inline;

到的div。

此外，請仔細檢查父div中是否有足夠的空間。每個瀏覽器都以不同方式計算。也就是說，對於兩個div並排出現，必須有足夠的空間來說明它們的寬度和邊距等。

來源

2009-12-04 13:36:04

HTML - 煩惱與div的

回答

相關問題