内容区域不随其内容扩展！

我一直在编写一个我一直在工作了一个星期左右的设计，并且有一个核心跨越障碍。内容区域不随其内容扩展！

在做我的右列模块之一的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

内容区域不随其内容扩展！

回答

相关问题