960網格系統 - 12山坳 - 接觸容器邊緣

我使用的是960網格系統，試圖創造一個佈局......我有以下代碼：960網格系統 - 12山坳 - 接觸容器邊緣

<div class="container_12"> 
    <div class="grid_3 alpha"></div> 
    <div class="grid_9 omega"></div> 
</div>

我使用阿爾法和歐米茄分別刪除左邊距和右邊距。這使得divs可以觸摸容器的左邊緣。

但問題是右手grid_9歐米茄不會觸及右側。我明白爲什麼會這樣，但我不知道如何使用960點的方法..

感謝，

來源

2011-11-01 Lee

這可能有助於理解960網格框架背後的基本原理。該框架基於一個非常簡單的原則，該原則結合了固定寬度和邊距來創建網格佈局，以便快速進行網站開發。整個框架利用了float: left，它允許網格並排顯示以及在每個網格之間創建20px緩衝區。因此我相信您誤解了"alpha"和"omega"類的使用。這些類旨在刪除作爲其他網格的子網格的邊距，以使邊距成倍增加。

拿這個代碼，例如：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>960 Grid System &mdash; Demo</title> 
<link rel="stylesheet" href="css/reset.css" /> 
<link rel="stylesheet" href="css/text.css" /> 
<link rel="stylesheet" href="css/960.css" /> 
</head> 
<body> 

<div class="container_12" style="background:blue;"> 
    <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div> 
    <div class="grid_9 omega" style="background:green;">Grid_9 Omega</div> 
</div> 

</body> 
</html>

這將產生類似於： Standard 960 layout 你會發現，沒有保證金Grid_3左邊但Grid_3和Grid_9之間的20像素的保證金。這是由Grid_3具有margin-right:10px和Grid_9具有margin-left:10px引起的。當兩個div都向左浮動時，它們會產生這個間距。您還會注意到Grid_9右側還有10px的餘量。這是由於左邊距已被移除到Grid_3，現在將整個佈局在container_12 div內移動超過10px。

爲了實現您所描述的佈局。從我的理解應該是這樣的： 960 layout with Float

您將需要創建一個新類，以將float:right應用到Grid_9或增加Grid_9寬度。

爲此直列會是這個樣子：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>960 Grid System &mdash; Demo</title> 
<link rel="stylesheet" href="css/reset.css" /> 
<link rel="stylesheet" href="css/text.css" /> 
<link rel="stylesheet" href="css/960.css" /> 
</head> 
<body> 

<div class="container_12" style="background:blue;"> 
    <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div> 
    <div class="grid_9 omega" style="float:right; background:green;">Grid_9 Omega</div> 
</div> 

</body> 
</html>

來源

2011-11-01 18:48:32

感謝您花時間寫出詳細的解釋。我希望他們是960網格系統中的一個本地類，根據我的需要，無需添加我自己的CSS。儘管我沒有得到我正在尋找的確切答案，但我確實從您的帖子中學到了一些東西。 – Lee

你不使用960系統，因爲它的目的是要糾正此行爲。使用alpha和omega類刪除的邊距將使它的總和達到960像素。

Alpha和歐米茄分別只刪除左邊和右邊的邊距，它們不會改變寬度。如果你想這個工作，你需要添加一個類到grid_9 omega股利，給它一個寬於標準的寬度。也許是720px？

<style> 
.wide_9{width:720px;} 
</style> 

<div class="container_12"> 
    <div class="grid_3 alpha"></div> 
    <div class="grid_9 wide_9 omega"></div> 
</div>

來源

2011-11-01 16:33:59 daveyfaherty

等一下，你說的是「你沒有使用960系統，因爲它的設計」，然後使用黑客的東西來工作？我不使用960gs，但看起來不正確，加上OP說他想「用960個方法糾正這種行爲」。那麼沒有辦法在網格框架中「本地」呢？ –

我不會調用定義類並將其寬度設置爲黑客。假設OP知道不把樣式標籤放在身體內是合理的。如果他想要非標準的行爲，他需要添加自己的css。我還沒有看到他想要在grid css中做什麼的規定。這樣的框架給你一個很好的基礎，但是如果你想做特別的事情，你需要添加你自己的CSS。這是一個給定的。 – daveyfaherty

是的「hack」對於一個術語來說太強大了，我只是感到驚訝，這裏面沒有解決方案，特別是如果alpha類正在爲第一個div工作。然後+1，但也許像'full-width'一樣向容器中添加一個類將是一個很好的解決方案。 –

您需要在子元素中使用阿爾法和歐米伽類。如果您的佈局需要觸及邊距（您使用背景），正確使用alpha和omega類將看起來像這樣附加grid_12 div的背景。

<div class="container_12"> 
    <div class="grid_12"> 
    <div class="grid_3 alpha"></div> 
    <div class="grid_9 omega"></div> 
    </div> 
</div>

，或者如果您不需要背景對齊方式，你可以簡單地忽略阿爾法和歐米伽類

<div class="container_12"> 
    <div class="grid_3"></div> 
    <div class="grid_9"></div> 
</div>

這兩個片段應該在瀏覽器中一樣。

來源

2013-03-22 12:57:35 icebreaker

960網格系統 - 12山坳 - 接觸容器邊緣

回答

相關問題