HTML5 CSS对齐问题

Question

指向我页面的链接： 我的页面

出于调试目的，我为页面的3个部分设置了CSS背景颜色。 “Zine”应该有红色背景，“Book Cover”应该有“green”背景，而“Magazine”应该是“Yellow”。

由于某种原因，红色的背景仅应用于“Zine”部分的一小部分，Zine部分中的所有图像和文本应该具有背景红色，但大部分都是绿色的。

此外，如果您注意到这是在960网格布局上，并在书籍部分（应该是绿色背景）我有一个h1 Book Jacket>标签，您将在960网格外部实际看到文本Book Jacket（右侧页面右侧的David Carson图像）

编辑：找到解决方案：

我更改了以下代码：

<article class="container_12">
  <section class="zine">

至：

<article>
  <section class="container_12 zine">

我认为这个修复有效，因为节类“zine”包含应该是红色背景的全部内容。 这消除了对明确修复的需要，但是其他人建议的clearfix也有效。

Answer 1

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

编辑：

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

Answer 2

当您使用960.gs时，您应该使用grid_X类（X是1到12之间的数字）。 并且你应该在每个“行”之后添加.clear。

你应该看一下960.gs的来源，看看他们是如何使用它的。 这是一个非常好的概述。