Html 内容区域不随其中的内容扩展!

Html 内容区域不随其中的内容扩展!,html,css,Html,Css,我一直在编写一个设计,我已经工作了一周左右,核心遇到了一个障碍 在对我右边的一个列模块执行HTML/CSS时,其中的内容会扩展,但是它所在的背景和边界区域不会扩展 htttp://www.gamefriction.com/Coded/ (带示例的url) (页面上使用的css样式表) 这个网站是纯HTML和CSS在这个时候所有的代码都可以通过查看源代码选项在所有浏览器上查看 工作不正常的区域是右侧模块中的项目符号链接,蓝色背景显示“联盟菜单” 上面的内容将使模块背景展开,但链接的项目符号菜单不会

我一直在编写一个设计,我已经工作了一周左右,核心遇到了一个障碍

在对我右边的一个列模块执行HTML/CSS时,其中的内容会扩展,但是它所在的背景和边界区域不会扩展

htttp://www.gamefriction.com/Coded/ (带示例的url) (页面上使用的css样式表)

这个网站是纯HTML和CSS在这个时候所有的代码都可以通过查看源代码选项在所有浏览器上查看

工作不正常的区域是右侧模块中的项目符号链接,蓝色背景显示“联盟菜单”


上面的内容将使模块背景展开,但链接的项目符号菜单不会展开。

在执行其他操作之前,请选择一个doctype。您现在使用的浏览器在所有浏览器中都默认为“怪癖”模式,坦白地说,这将根据您在哪个浏览器中查看站点提供许多有趣的结果

我推荐HTML4.01Strict,但有些人也喜欢xhtml strict选项。无论哪种方式,请确保doctype的格式正确。否则它仍然会默认为怪癖

一旦完成,您将拥有一套可靠的规则,您可以使用这些规则

UDPATE: 好了,现在你有了一个好的doctype。在league\u菜单\u links中添加另一个div,以清除league\u link\u wrap divs中的浮动。例:

<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相应地展开

,因为您正在浮动
#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和li而不是DIV。毕竟,它是一个项目列表。

许多人没有使用clearfix方法,而是添加了
溢出:隐藏的样式声明到你的分区、联盟、菜单链接


这将使该div知道其子女的身高并环绕他们。这样做的一个缺点是,如果将来您给包装div一个定义的高度,那么内容将看起来被切断。

Hmm,据我所知,以这种方式使用doctype对HTML5是安全的。我会按照您的建议尝试HTML4.01 strict,我认为这是安全的,但您根本没有选择任何特定的doctype,因此它默认为怪癖。Chris在这方面似乎更有经验。是的,我将其设置为4.01 strict,我的验证出现了各种各样的错误,现在我不知道如何修复。我用div和CSS做HTML/CSS才一个星期。我过去经常使用表格和内联样式,所以非常糟糕,非常感谢!似乎每个人都在我找到它的时候提出了这个建议(除了另一个地方我发现它使用了br而不是空div。我试过ul,li,但它没有按照我想要的方式排列(水平排列)不管我怎么做,我都无法让它正确排列。所以我使用了div,这样我就可以得到你看到的对齐方式。我使用了列表样式的图像并添加了项目符号,但是项目符号周围的间距大于项目符号图像的大小,右侧的链接会使项目符号与左侧重叠取消链接。我将使用clear:left尝试空div;谢谢!我尝试将.league_menu_clear类的空div添加到#league_menu_links的div中,但它没有做任何操作,因此我尝试将其移动到环绕计费链接和上面的内容,但也没有做任何操作。也许我误解了你的意思“联盟菜单链接的元素子元素”"还尝试添加了一个没有类的div和一个带有clear:left的#league_menu_links div;这样做更有效,还将红色模块文本移到了右侧,而不是现在的位置。我用一个示例进行了编辑。另外,为了在你有时间和意愿的时候阅读,一篇关于设置列表样式的非常好的文章:是的,当你更新此内容时,我发现了它另一篇帖子建议对包含clear:both的类使用
;我不确定只清除左侧是否会起作用,但是添加
with.class{clear:both;}工作完美!谢谢!谢谢!我会在我的#league#U菜单#链接中添加overflow:hidden;以及添加带有clear:left的空div;以确保我覆盖了所有的基础。