Question

我正在使用S tephen Bau's 960 fluid grid，我不认为它适用于嵌套网格，因为每个网格都是其父网格的％，除非我错过了使用它？

在样式表中

.grid_12 { width:98%, }

因此，如果视口是1200px，那么＆lt; header /＆gt;是1176px，然后嵌套＆lt; nav /＆gt;网格是其中98％的1152.48px - 如果它是普通的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>

Answer 1

这只是对这个（以及大多数其他）流体网格如何工作的限制 - 因为它们必须保持流畅。

所以选项要么是将嵌套网格放在自己的容器中，要么创建一个可以重用的CSS类，将宽度重置为100％（例如，将其命名为.grid_full，可以与.alpha和.omega结合使用，以使元素填充其父元素。

实际上，这些网格是一个止步距离，直到CSS布局和模板标准发展并获得牵引力。

Answer 2

我最近遇到了类似的问题，我只是把我的修复放在这里，所以任何刚刚遇到类似问题的人都可以找到答案。通过遵循一个简单的规则嵌套网格很简单：行的所有嵌套网格应总计为12 （或16或24，具体取决于您的网格系统）。

假设您想要一个7列的外部网格，然后根据需要嵌入尽可能多的网格，只要它们总和为12，例如：“grid_1”，“grid_5”和“grid_6”就可以了！

您可能怀疑这与pull_i和push_i类无关，这些类仅用于重新排序行的“砖块”或更改其源代码顺序。容器网格可以是grid_i个类中的任何一个，在我们的示例中是grid_7！如果你需要一个没有损失的容器，那么创建一个：

.container_12 .full {
width:100%;
}

实际宽度（以像素为单位）：父网格的每个子网的宽度均为子％*（父级宽度，以px为单位）/ 100像素。因此，在我们的示例中，“grid_1”= 6.25 *（px中的实际“grid_7”）/ 100 px。

当然所有这些都带来了成本：通过对我们的html标签进行分组，我们刚刚从语义跳转到布局定义 - 在理论上 - 我们不想要这个！理想的情况是添加一个可以实现魔法的类，比如说“group_1”，“group_2”，然后我们会碰壁：渲染遵循源代码顺序！

请参阅我的回答here。

在960流体网格中设计缺陷还是我滥用它？

2 个答案: