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

【问题标题】：960 grid system - nested grids have layout problem960 网格系统 - 嵌套网格有布局问题
【发布时间】：2011-04-06 05:04:34
【问题描述】：

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

我有了基本的想法，刚刚实现了一个骨架网站here on my server

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

<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 */
}

【问题讨论】：

请不要使用align: center 这是一个已弃用的属性。如果你需要居中的东西，给它一个宽度并使用margin: 0 auto
@Yi Jiang：感谢您指出这一点，我有点懒惰使用内联样式将 h1 对齐到中心。当然我不会将它用于真实站点:)
您不应该这样做，因为这会覆盖.grid_insider 可能已经拥有的任何边距。就像我说的，在我看来，outline 效果更好。

标签： css 960.gs

【解决方案1】：

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

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

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}

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

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

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

【讨论】：

@蒋毅：谢谢你的提示！从来不知道/意识到已经有一种内置的方法可以做到这一点......
@Yijiang：你说得对，我真的不应该使用彩色边框来尝试以这种临时方式进行调试，必须有更好的方法这样做:)
@Micheal 您可以使用outline 属性。它像边框，但实际上并没有改变元素的宽度。并使用 Firebug - 然后您可以以临时方式编辑页面在您的浏览器中 :)
@Yijiang：也许我找到了一种方法，仍然可以使用彩色边框进行调试，请查看我更新的问题描述。

【解决方案2】：

还有一个很晚的答案......

使用任一轮廓作为边框

`outline: 1px solid red;`

或使用盒子大小

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

【讨论】：