內容區域不隨其內容擴展！

我一直在編寫一個我一直在工作了一個星期左右的設計，並且有一個核心跨越障礙。內容區域不隨其內容擴展！

在做我的右列模塊之一的HTML/CSS時，其內容會擴展，但它所在的bg和邊界區域不會。

HTTTP：//www.gamefriction.com/Coded/（URL與例如） http://www.gamefriction.com/Coded/css/style.css（頁面上使用的CSS樣式表）

這個網站是純粹的HTML和CSS，此時所有的代碼可以通過查看所有瀏覽器上的查看源選項。

無法正常工作的區域是右邊模塊中帶有藍色背景的「聯盟菜單」中的子彈鏈接。

上面的內容會使模塊背景展開，但鏈接的項目符號菜單不會。

來源

2010-05-07 Meta

既然你浮在#league_menu_links DIV中的元素，它不會隨着孩子的增加而擴大。

一分劈飛將與clear:left;添加一個空div爲#league_menu_links最後一個子元素，像這樣：

<div id="league_menu_links"> 
    <div class="league_link_wrap"> 
     ... 
    </div> 
    ... 
    <div style="clear: left;"></div> 
</div>

我也建議使用UL和李，而不是申報單的，在這種情況下。它畢竟是是項目的列表。

來源

2010-05-07 16:43:51 ANeves

好吧，我試過ul，li，它沒有按照我想要的方式排隊（水平），也沒有所以我去使用一個div，所以我可以得到你看到的對齊方式我使用了list-style-image並添加了子彈，但是添加了子彈子彈比子彈圖像的大小和鏈接到右側更將有子彈重疊左側鏈接我會嘗試用明確的空div：離開; 感謝 – Meta 2010-05-07 16:51:30

我嘗試添加一個！在#league_menu_links的div內的.league_menu_clear類的空div，它沒有做任何事情，所以我試着t o移動它來包裹雙方的鏈接和它上面的內容，而且也沒有做任何事情。也許我誤解你的意思是「#league_menu_links元素孩子」 – Meta 2010-05-07 16:59:56

也嘗試添加一個沒有類的div，並添加#league_menu_links div與clear：left;並且只是將它扔掉了更多，並且將紅色模塊文本移到了右側，而不是現在的位置。 – Meta 2010-05-07 17:03:27

做任何事之前，選擇一個文檔類型。你現在所擁有的默認爲所有瀏覽器中的怪癖模式，坦率地說，根據你瀏覽網站的瀏覽器，它會給出很多有趣的結果。

我推薦html 4.01 strict，但有些人也喜歡xhtml strict選項。無論哪種方式，請確保doctype格式正確。否則，它仍然會默認爲怪癖。

一旦完成，您將擁有一套可以使用的可靠規則。

UDPATE： 好的，現在你有一個很好的文檔類型。在league_menu_links內添加另一個div，以清除league_link_wrap divs中的花車。 EXA：

<div id="league_menu_links"> 
<div class="league_link_wrap">some text</div> 
<div class="league_link_wrap">some text</div> 
<div class="league_link_wrap">some text</div> 
<div style="clear:both;"></div> 
</div>

這將標誌着瀏覽器的浮動的div是由外層div包含並導致外層div相應地擴大

來源

2010-05-07 16:39:44 NotMe

嗯，就我所知，以這種方式使用doctype對於HTML5來說是安全的。我試試HTML 4.01嚴格，因爲你建議 – Meta 2010-05-07 16:42:31

我認爲是安全的，但你沒有選擇任何具體的文檔類型，所以它默認爲怪癖。克里斯在這方面聽起來更有知識。 – ANeves 2010-05-07 16:51:00

是的，我把它設置爲4.01嚴格，我的驗證正在出現各種錯誤，現在我不知道如何解決。我只使用div和CSS做HTML/CSS大約一週。我曾經使用表格和內聯樣式，所以這是非常糟糕的大聲笑 – Meta 2010-05-07 17:06:58

除了使用clearfix方法外，許多人還爲您的div＃league_menu_links添加了樣式聲明overflow: hidden;。

這將使那個div 知道它的孩子的高度並環繞它們。其中一個缺點是，如果將來您將包裝div設置爲定義的高度，那麼內容將會被切斷。

來源

2010-05-07 17:53:01 Braxo

謝謝！我將添加溢出：隱藏;到我的#league_menu_links以及添加清空的div：left;只是爲了確保我覆蓋了所有的基礎。 – Meta 2010-05-07 18:00:23

內容區域不隨其內容擴展！

回答

相關問題