代码之家 › 专栏 › 技术社区 › Michael Mao

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

960.gs css

10

Michael Mao · 技术社区 · 15 年前

我刚开始为自己开发一个爱好网站,并尝试使用 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个。如果我将“用户面板”的类更改为“网格3前缀4”,那么这实际上将把这个元素带到下一行,这将破坏所有内容。

另一件事是,尽管第一级元素(如顶栏和标题栏)位于正确的位置(您可以使用方便的火狐插件确认 gridfox ,精确宽度为940px,嵌套网格不在它们应该位于的位置(稍微远离设计位置)。

我是这个CSS网格系统的新手,有没有更好的方法来管理嵌套元素?我不得不说,960.gs上的一些示例网站非常令人惊讶地看到:)

感谢您提前提出任何建议!

更新信息

好的,根据下面的答案,我认为在调试嵌套网格时仍然可以使用彩色边框,有一种特殊的“欺骗”方法:

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

2 回复 | 直到 12 年前

1

14

Yi Jiang G-Man 15 年前

不确定是否还没有实现,但框架确实为嵌套元素提供了一个方法。

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

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}

这将覆盖它们为所有网格元素提供的边距,从而允许位于边上的元素靠在容器的边上。

你需要做的是给左边的菜单栏 alpha 班级,正确的一个 omega 班级。那么,你得把它移走 全部的 添加到这两个元素及其容器中的边框。这是因为css float s是非常精确的,如果使元素比定义的框架大的话,它将被破坏。

如果需要添加边框,则必须添加一些替代这些边框的附加样式,并为它们提供比框架中定义的宽度小两个像素(边框每边一个像素)的宽度。

2

John Smith 12 年前

回答得很晚……

为边框使用任一轮廓

`outline: 1px solid red;`

或者使用盒子大小

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