HTML5 CSS 对齐问题

Question

指向我页面的链接: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 也有效。

Answer 1

.zine 的高度正在崩溃。发生这种情况是因为它包含未清除的 float 元素。有很多清除 float 的方法。我建议使用以下两种方法中的一种(或两种):

1. "clearfix hack" .只需将此页面中的 CSS 规则添加到您的 CSS 文档中，并在类“zine”之外添加类“cf”(或其他)。
2. 或者，overflow: hidden .基本上，只需将 overflow: hidden 添加到“zine”元素即可。

---

编辑:

正如您自己发现的那样，由于您使用的是 960 网格，因此 container_12 和 container_16 元素内置了 clearfix。将这些类名中的任何一个添加到包装元素中都与我上面解释的相同。