CSS容器不與網格一起增長？

我有這樣的CSS定義的容器背景;CSS容器不與網格一起增長？

.container { 
    background:#fff; 
    margin-left:auto; 
    margin-right:auto; 
    position: relative; 
    width:970px; 
    border:1px solid #000; 
    padding:5px 10px; 
}

的問題是我有一個jqGrid的放入容器的底部（接近底部邊緣），並在其最初繪製它不適合容器面板內，看起來是正確的。事情是這樣的（請原諒我的非的l33t圖形的skillz）：

alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg

但是當我填充網格行它跨出的容器，它看起來真的很俗氣，這樣的事情（我盤旋原容器背景的邊緣）：

alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg

我相信它的東西我做錯了與CSS。任何意見，將不勝感激。

編輯：問題不在於寬度容器的高度由現居住電網的新高度重合

來源

2009-10-17 CmdrTallen

我已經多次看到這種情況，當你有漂浮在裏面。在關閉容器之前添加清除div。漂浮之後，你應該總是清理乾淨。

<div class="container"> 
    <div id="nav" style="float:left;"> 
    ... 
    </div> 
    <div id="grid" style="float:left;"> 
    ... 
    </div> 
    <div style="clear:both;"></div> <!-- this does the trick --> 
</div>

我不同意adding float to container。雖然這會起作用，但有不必要的花車會給你帶來更多的問題。只有在必要時使用浮動，並在完成浮動時將其清除。

同樣以我的經驗，overflow在這裏沒有任何意義，除非你定義了height。我不認爲在容器上設置溢出修復了這個問題。如果我錯了，請在評論中糾正我。

來源

2009-10-17 06:59:39

添加溢出：隱藏自動包含浮動。（它比clearfix要容易得多。）如果你聲明瞭一個高度，它會將其關閉 - 如果沒有，就包含它們。當然，沒有別的東西可以逃脫容器。不過，建議您不要使用浮動內容。 – 2010-03-14 00:06:12

您的容器是固定的寬度和不會增長。你可能要找的是最小寬度。換句話說，更改：

width:970px;

到：

min-width:970px;

作爲一個說明，IE 6和7的治療寬度最小寬度，但其它的瀏覽器沒有。

來源

2009-10-17 02:18:04

好的，謝謝高度的任何東西？ – CmdrTallen 2009-10-17 02:27:33

我想你的意思是相反的。 IE6不理解最小寬度。它像寬度一樣對待它。 – 2009-10-17 06:59:07

我認爲你需要這在你的CSS：

overflow: auto;

來源

2009-10-17 04:27:50

http://www.w3schools.com/Css/pr_pos_overflow.asp有其他選項和信息與此相關。 – 2009-10-17 04:29:02

它對我來說很奇怪，它如何擴展容器，但顯示了滾動條和垂直滾動條。似乎應該有一種方法來調整背景容器的大小，而不是放置滾動條。有 – CmdrTallen 2009-10-17 06:39:10

有。溢出：隱藏。 – 2010-03-14 00:07:58

.container { overflow:hidden; }

假設你正在處理的浮動，這是使實際包含它們的容器的一種方式。

來源

2009-10-17 04:31:30

根據您對容器和內部網格的浮動情況，您可以執行許多不同的操作。您可能只需添加清除即可離開，您也可以浮動父項。這被稱爲，設置一個浮點數來修復一個浮點數。所以，如果您的網格有

float:left;

然後，你可以添加

float:left;

要將容器的CSS。我真的很喜歡Complex Spiral article on containing floats。

來源

2009-10-17 04:38:52

CSS容器不與網格一起增長？

回答

相關問題