960网格系统-嵌套网格有布局问题

Question

我刚刚开始为自己开发一个爱好网站，并尝试使用 960 css 网格系统 来布局我的 html 元素在屏幕上。

我有了基本的想法，刚刚实现了一个骨架网站 在我的服务器上

我有几个问题到目前为止：

<div class="container_12">
<div class="grid_12">
    <div id='top_bar' class='grid_insider'><!-- start of #top_bar -->

        <ul id='top_menu' class='grid_5'><!-- start of #top_menu -->
            <li>Home</li>
            <li>Fake1</li>
            <li>Fake2</li>
            <li>Fake3</li>
        </ul><!-- end of #top_menu -->
        <ul id='user_panel' class='grid_2 prefix_4'><!-- start of #user_panel -->

            <li>log in</li>
            <li>faq</li>
        </ul><!-- end of #user_panel -->

    </div><!-- end of #top_bar -->
</div>
<div class="clear"></div>
<div id='title_bar' class="grid_12">
    <h1 id="logo" align='center'>LOGO, TITLE and SLOGAN all go here!</h1>

</div><!-- end .grid_1 -->
<div class="clear"></div>

我使用的是基于网格 12 的模板，因此每个“行”上的“网格”总数应为 12。但是，我只能将两个元素放在同一“行”上，网格总数加起来为 11 ，但不是 12。如果我将 #user_panel" 的类更改为“grid_3 prefix4”，那么实际上会将该元素带到下一行，这会破坏所有内容。

另一件事是，尽管第一级元素（例如top_bar 和 title_bar 位于正确的位置（您可以使用方便的 Firefox 插件 gridfox 来确认） ，精确宽度为 940px，嵌套网格未处于应有的位置（偏离设计位置）。

我是这个 css 网格系统的新手，是否有更好的方法来管理嵌套元素？不得不说 960.gs 上的一些示例网站非常令人惊奇:)

提前感谢您的任何建议

更新信息

好的，根据下面的答案，我认为这仍然是可能的！要在调试嵌套网格时使用彩色边框，有一种特殊的方法可以“作弊”：

.grid_insider
{
    border : 1px solid red;
    margin : -1px; /* this will stop the element from 'expanding' its space */
}

Answer 1

不确定您是否还没有意识到，该框架确实提供了一种嵌套元素的方法。

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
------------------------------------------------*/

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}

这会覆盖它们赋予所有网格元素的边距，从而允许侧面的元素靠在其容器的侧面。

您需要做的是将左侧菜单栏指定为 alpha 类，将右侧菜单栏指定为 omega 类。然后，您必须删除添加到这两个元素及其容器的所有边框。这是因为 CSS float 非常精确，如果您使元素大于定义的框架，就会中断。

如果您需要添加边框，则必须添加一些额外的样式来覆盖这些样式，并使它们的宽度比框架中定义的小两个像素（边框的每一侧各一个）。

Answer 2

和一个很晚的答案......

使用边框轮廓

`outline: 1px solid red;`

或使用框大小

     .gridInsider {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
     }