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的來源，看看他們是如何使用它的。 這是一個非常好的概述。