960 css框架，alpha/omega問題

我使用960 css框架。問題是我試圖在3列布局中使用完整的960寬度。所以我使用容器16和3格與網格。第一個和最後一個網格Im使用阿爾法和歐米茄去除左右排水溝。它是去除α排水溝，但不是歐米茄排水溝。下面是HTML：960 css框架，alpha/omega問題

<div class="container_16" id="section_body"> 
    <div class="grid_3 alpha" style="background:red;">body left</div> 
    <div class="grid_10" style="background:green;">body</div> 
    <div class="grid_3 omega" style="background:blue;">body right</div> 
</div>

的部分身體的CSS是：

#section_body { 
    min-height:500px; 
    overflow:hidden; 
    background:#fff; 
}

下面是截圖Ø問題，你可以看到藍色犯規的最後一個div一路往右走。我究竟做錯了什麼？

enter image description here

UPDATE

我試着刪除除了960個所有的CSS樣式和3個的div，我仍然有同樣的問題。無論我無法得到它整個960px寬度。它只會走940px寬度。

來源

2011-08-05 John

由於左右列寬度爲160像素，因此它們的左右邊距爲10-10像素，即額外的20像素。中心列寬度爲580px，邊距也爲10-10px。

所以 160 + 10 + 160 + 10 + 580 + 20 = 940px

您選擇的3欄佈局是20像素更薄。

以下示例每邊都有一個10-10像素的裝訂線，所以它是死點。

<div class="container_16" id="section_body" style="background-color:#CCCCCC"> 
<div class="grid16"> 
    <div class="grid_3" style="background:red;">body left</div> 
    <div class="grid_10" style="background:green;">body</div> 
    <div class="grid_3 omega" style="background:blue;">body right</div> 
</div> 
</div>

來源

2011-08-06 00:50:40 Jauzsika

所以我如何才能通過第三格填充剩下的20像素自動？手動設置寬度爲180px？ – John

我的2美分是：忘記CSS框架。 – Jauzsika

不是這個問題的真正主題。猜猜我會弄清楚。謝謝您的幫助！ – John

警告：沒有在Jauzsika的代碼，這使得它即使它不應該（因爲‘container_16’和的工作，一個錯字（「grid16」而不是「grid_16」）缺少「alpha」）。

正確答案：

有要記住兩個重要的事情：

1）按照設計，960gs留下了10px的和右邊距，即實際含量面積只有940px寬。

2）當使用嵌套網格時，只有在這種情況下，children元素才需要特殊的類。第一個孩子需要一個「alpha」類，最後一個孩子需要一個「omega」類。

由於您的代碼中沒有子div，因此不需要「alpha」和「omega」。

所以，這兩種解決方案是等價的（校正碼）：

<div class="container_16" id="section_body" style="background-color:#CCCCCC"> 
    <div class="grid_3" style="background:red;">body left</div> 
    <div class="grid_10" style="background:green;">body</div> 
    <div class="grid_3" style="background:blue;">body right</div> 
</div> 

<div class="container_16" id="section_body" style="background-color:#CCCCCC"> 
<div class="grid_16"> 
    <div class="grid_3 alpha" style="background:red;">body left</div> 
    <div class="grid_10" style="background:green;">body</div> 
    <div class="grid_3 omega" style="background:blue;">body right</div> 
</div> 
</div>

來源

2011-12-12 14:05:21

我同意文森特。這是導致John的問題的'alpha'和'omega'CSS類。文森特的代碼是現貨。 –

+1以及解釋。 – Hoque

960 css框架，alpha/omega問題

回答

相關問題