960网格系统，一格内三格_4 12答案

【问题标题】：960 GridSystem, three grid_4 inside one grid_12960网格系统，一格内三格_4 12
【发布时间】：2023-03-03 15:19:01
【问题描述】：

我创建了一个 960gs 的 16 列布局，div 为 class="grid_12"（主），之后是 grid_4（右）（12+4...）在那个 grid_12 里面我想要一个三列样式（3 pcs.grid_4）。但是 grid_4 的盒子不适合 grid_12，最后一个盒子掉到了第二行。

960gs框架不应该为我做这个布局吗，我错过了什么吗？

提前致谢。

<div class="container_16">
...
<div id="main" class="grid_12">
 <div class="grid_12">
   <div class="grid_4"></div>
   <div class="grid_4"></div>
   <div class="grid_4"></div>
 </div>

 <div id="right" class="grid_4">

 </div>
</div>
...
</div>

【问题讨论】：

标签： 960.gs css-frameworks

【解决方案1】：

发现我需要将 alpha 和 omega 添加到第一个和最后一个 grid_4 框。现在可以了。

<div id="main" class="grid_12">
    <div class="grid_4 alpha">

    </div>
    <div class="grid_4">

    </div>
    <div class="grid_4 omega">

    </div>
</div>

【讨论】：

对于任何在这里磕磕绊绊的人，要小心像“border:1px solid;”这样的东西在 div 上，它们会将 div 的宽度增加 +2 px，这将导致所描述的相同症状。您在填充时遇到了同样的问题。解决方案是在 grid_x div 中添加 div，并将边框或填充应用于这些内部 div。
或者 - 使用轮廓而不是边框，它不会影响宽度。