添加填充到CSS網格系統，如960.gs

我正在構建一個使用流行的960.gs 16列網格系統的網站。下面是設計的相關部分截圖，與覆蓋在上面的表格列：添加填充到CSS網格系統，如960.gs

Example of the grid I'm building, mocked in Photoshop

的問題是白色的「流行的當下」複選框。由於這有一個白色的背景，我想在框中填充一些填充。足夠簡單：我在父級內添加了一個<div>，並使用padding: 10px和白色背景適當地設置了它。

當我嘗試重新使用像這樣的'內部'<div>內部的網格時，問題出現了。例如，在那個白色框中，我想讓鏈接列表位於5列容器中，而圖片位於3列容器中（對不起，屏幕截圖不以此大小顯示）。

我嘗試在.inner類中重新定義網格的列大小，這部分工作 - 我從每列大小中刪除了10個像素，因爲總寬度需要比之前減少20px來計算邊距。這適用於.inner容器內有兩個子<div>s的情況，但顯然如果有多於或少於2個，那麼情況開始出現錯誤。

有沒有人有處理這種事情的好策略？無論背景顏色如何，我都願意將填充放在所有列上，但在黑客入侵網格時無法像我想要的那樣工作。

感謝馬特

來源

2012-02-16 Matt Andrews

的960gs有.alpha和.omega類允許嵌套。通常這會從您應用它的元素中移除前10px和後10px的邊距。您可能能夠扭轉這些和濫用他們給你，你需要填充 - 總體列的寬度將增加，但填充將是對「錯誤」側

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

我沒有測試過這雖然不知道它會起作用

來源

2012-02-16 01:55:38

這並沒有完成我所需要的，但會標記爲您接近解決方案的答案。 – 2012-03-12 14:07:36

添加填充到CSS網格系統，如960.gs

回答

相關問題