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

我刚刚开始为自己开发一个爱好网站,并试图使用 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上的示例网站是相当惊人的看到:)

感谢任何建议提前！

更新信息

好的,根据下面的答案,我估计在调试嵌套网格时,仍然可以使用彩色边框,有一个adhoc的方法来“欺骗”：

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

解决方法

不确定如果你还没有意识到,但框架确实为嵌套元素提供了一种方法.

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

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}

这将覆盖它们赋予所有网格元素的边距,从而允许边上的元素靠在其容器的两侧.

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

如果你需要添加边框,你将不得不添加一些额外的样式来覆盖它们,并为它们提供宽度为两个像素(每边边框一个),比框架中定义的更小.

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

解决方法

猜你在找的CSS相关文章