960流體網格中的設計缺陷還是我濫用？

我使用S tephen Bau's 960 fluid grid，我不認爲它可以與嵌套網格一起工作，因爲每個網格都是其父網格的百分比，除非我錯過使用它。960流體網格中的設計缺陷還是我濫用？

在樣式表

.grid_12 { width:98%, }

因此，如果視區是1200像素然後<頁眉/ >是1176px，則嵌套< NAV/>網格是那使它1152.48px 98％ - 如果它是定期960定格都將是相同的寬度

<div id="wrap" class="container_12"> 
    <header class="grid_12"> 
     <div id="logo" class="grid_6 alpha"> 
      .. logo img ... 
     </div> 
     <div id="uti" class="grid_5 prefix_1 omega"> 
     .. util menu ... 
     </div> 
    <nav class="grid_12"> 
     .. nav list .. 
    </nav> 
    </header> 
    <div id="content class="grid_12"> 

     <div id="main-content" class="grid_12 clearfix"> 

      <div id="col-1" class="grid-9 alpha"> 

       </div> 
       <div id="col-2" class="grid-3 omega"> 

       </div> 

     </div> 

    </div> 

    <footer class="grid_12 clearfix"> 

    </footer> 

</div>

來源

2012-03-02 htmlr

這僅僅是一個如何（以及大多數其他），流體網格工作，因爲他們必須保持，那麼，流體限制。

所以，真正的選擇是要麼把你的巢式格柵在自己的容器中，或創建一個CSS類，您可以重用的寬度重置爲100％（將其命名爲類似.grid_full，例如，這可能是結合或不結合.alpha和.omega使元素填充其父項）。

實際上，這些網格是CSS佈局和模板標準發展並獲得牽引力之前的一個阻擋缺口。

來源

2012-03-03 01:06:29 justbeez

最近我遇到了類似的問題，我只是把我的修補程序放在這裏，所以任何對類似問題碰到碰撞的人都可以找到答案。通過遵循一個簡單的規則嵌套網格已經非常簡單：一行中的所有嵌套網格總計應達到12（或16或24，具體取決於您的網格系統）。

假設您想要一個7列的外網格，然後根據需要嵌入儘可能多的網格，只要它們總計爲12，例如：「grid_1」，「grid_5」和「grid_6」就可以了！

正如您可能會懷疑這與pull_i和push_i類無關，這些類僅用於對行的「磚塊」進行重新排序或更改其源代碼順序。集裝箱網格可以是grid_i類中的任何一個，在我們的示例中可以是grid_7！如果你需要一個容器，無脫落，然後創建一個：以像素爲單位

.container_12 .full { 
width:100%; 
}

實際寬度：父網格的每個孩子都有孩子％*的寬度（單位：像素父寬）/ 100像素。因此，在我們的例子中「grid_1」= 6.25 *（實際的「grid_7」在px中）/ 100 px。

當然，所有這些都帶來了成本：通過將我們的html標籤分組，我們剛剛從語義跳轉到佈局定義 - 理論上我們不想要這個！理想的做法是添加一個可以實現魔法的類，比如說「group_1」，「group_2」，但是我們點擊了牆：渲染遵循源代碼順序！

查看我的回答here。

來源

2013-09-17 07:30:25 centurian

960流體網格中的設計缺陷還是我濫用？

回答

相關問題