css - 960 流体网格中的设计缺陷还是我误用了它？

Question

我正在使用 S tephen Bau's 960 fluid grid ，而且我认为它不适用于嵌套网格，因为每个网格都是其父网格的 %，除非我没有使用它？

在样式表中

.grid_12 { width:98%, }

因此，如果视口(viewport)为 1200 像素，则 <header/> 为 1176 像素，则嵌套的

网格为 1152.48 像素的 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>

Answer 1

这只是此(以及大多数其他)流体网格工作方式的限制 - 因为它们必须保持流动性。

所以真正的选择是要么将嵌套网格放入它们自己的容器中，要么创建一个您可以重复使用的 CSS 类，将宽度重置为 100%(将其命名为 .grid_full ，例如，可以结合或不结合 .alpha 和 .omega 来使元素填充其父元素)。

实际上，在 CSS 布局和模板标准发展并获得关注之前，这些网格只是权宜之计。