我刚刚开始为自己开发一个爱好网站,并尝试使用 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 */
}
最佳答案
不知道你有没有意识到,框架确实提供了嵌套元素的方法。
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
这会覆盖它们给所有网格元素的边距,从而允许侧面的元素靠在容器的侧面。
您需要做的是为左侧菜单栏提供 alpha
类,为右侧菜单栏提供 omega
类。然后,您必须删除添加到这两个元素及其容器的所有 边框。这是因为 CSS float
非常精确,如果您使元素大于定义的框架,就会中断。
如果您需要添加边框,则必须添加一些额外的样式来覆盖这些样式,并使它们的宽度比框架中定义的宽度小两个像素(边框的每一侧一个)。
关于css - 960网格系统-嵌套网格有布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3608209/