Question

我一直在编写一个我已经工作了一个星期左右的设计，并且有一个核心障碍。

在执行我的一个右列模块的HTML / CSS时，其中的内容会扩展，但它所在的bg和边界区域却没有。

htttp://www.gamefriction.com/Coded/（带示例的网址） http://www.gamefriction.com/Coded/css/style.css（页面上使用的css样式表）

此网站纯粹是HTML和CSS，此时可以通过所有浏览器上的“查看源”选项查看所有代码。

无法正常工作的区域是右侧模块中的子弹链接，蓝色背景显示“联盟菜单”。

上面的内容将使模块后台展开，但链接的项目符号菜单不会。

Answer 1

在做其他事情之前，选择一个doctype。你现在拥有的那个在所有浏览器中都默认为怪癖模式，坦率地说，这将取决于你正在浏览网站的浏览器，会给出很多有趣的结果。

我建议使用html 4.01严格，但有些人也喜欢xhtml strict选项。无论哪种方式，请确保doctype格式正确。否则它仍然会默认为怪癖。

完成后，您将拥有一组可以使用的可靠规则。

<强> UDPATE：好的，既然你有一个好的doctype。在league_menu_links中添加另一个div来清除来自league_link_wrap div的浮点数。 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相应地扩展

Answer 2

由于您将元素浮动到#league_menu_links div中，因此它不会随着它的子项扩展。

一个hack-around将添加一个空clear:left; div作为#league_menu_links的最后一个元素子句，如下所示：

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

在这种情况下，我还建议使用ul和li而不是div。毕竟是一个项目列表。

Answer 3

许多人还在你的div＃league_menu_links中添加overflow: hidden;的样式声明，而不是使用clearfix方法。

这将使div 知道其子项的高度并将它们包裹起来。这样做的一个缺点是，如果将来你给包装div一个确定的高度，那么内容似乎会被切断。

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

3 个答案: