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非常精确,如果你使元素大于框架定义的元素,它将会中断.

如果需要添加边框,则必须添加一些覆盖这些边框的其他样式,并为它们提供宽度为两个px(边框每边一个),小于框架中定义的宽度.