指向我页面的链接:My Page
出于调试目的,我为页面的 3 个部分设置了 CSS 背景颜色。 “Zine”应该是红色背景,“Book Cover”应该是“绿色”背景,最后的“Magazine”应该是“黄色”。
由于某种原因,红色背景仅应用于“Zine”部分的一小部分,Zine 部分中的所有图像和文本都应使用红色背景,但大部分都变成了绿色。
此外,如果您注意到这是一个 960 网格布局,并且在 Book 部分(应该是绿色背景)我有一个 h1 Book Jacket> 标签,您实际上会在960 网格(页面右侧到 David Carson 图像的右上角)
编辑:找到解决方案:
我更改了以下代码:
<article class="container_12">
<section class="zine">
收件人:
<article>
<section class="container_12 zine">
我认为此修复有效,因为部分类“zine”包装了本应为红色背景的全部内容。这消除了对 clear fix 的需要,但是其他人建议的 clearfix 也有效。
最佳答案
.zine
的高度正在崩溃。发生这种情况是因为它包含未清除的 float 元素。有很多清除 float 的方法。我建议使用以下两种方法中的一种(或两种):
- "clearfix hack" .只需将此页面中的 CSS 规则添加到您的 CSS 文档中,并在类“zine”之外添加类“cf”(或其他)。
- 或者,overflow: hidden .基本上,只需将
overflow: hidden
添加到“zine”元素即可。
编辑:
正如您自己发现的那样,由于您使用的是 960 网格,因此 container_12
和 container_16
元素内置了 clearfix。将这些类名中的任何一个添加到包装元素中都与我上面解释的相同。
关于HTML5 CSS 对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16880801/