固定流体. 960.gs的固定布局
我们的网站引擎使用960.gs网格系统，我试图修改它为3列固定(100 am )-Fluid(最大到宽度)-Fixed(100 Am)视图。不幸的是，所有的960.gs在线发电机制造公正或完全固定或全流体网格。因此，我正在尝试修改最初生成的全流体网格，以实现这样的视图：
<------------100%--------------->
======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========
<-100px> <-100px>代码(修改后)：http://jsfiddle.net/vZm8x/
- 问题1)我不知道如何使屏幕上的中央内容区域最大。因为宽度:自动；根本不工作，宽度:100%只是包装div。
- 问题2)在固定到100 to的所有div之后，它继续包装任何东西。(显示:内联；没有任何帮助？)
我的问题是:这是否可以根据我们的需要修改960.gs模板？如果是，请给我一些解决问题的建议。提前谢谢你！
回答 1
Stack Overflow用户
发布于 2013-03-04 14:18:29
对于固定宽度的边列，它实际上非常容易。您将希望使用浮点数，并且可能需要执行人造柱技巧，这取决于您的特定设计需求。
你会想要一些类似于：
<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>以及：
div {
/* border-box, to make sure "width" is our intended width */
-moz-box-sizing: border-box; /* Firefox still uses prefix */
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
background: #f00;
}
.right {
float: right;
width: 100px;
background: #00f;
}
.middle {
width: 100%;
padding: 0 100px;
background: #ccc;
}在这里看到它的作用 (这没有faux列效应，但应该给您一个起点)。如果使用输出更改部分的宽度，您将看到列保持不变，而内容则停留在外部列的范围内。
内容列必须是最后一列，因为它仍然在文档流中，因此右列将位于内容下面。
或者，您可以在侧列上使用position: absolute;，如下所示：
.wrapper {
position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.middle {
padding: 0 100px;
}
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}这些技巧将适用于IE8+、火狐、Chrome、Safari和Opera。IE7可能会因为使用W3C框模型(“content”)而不识别box-sizing CSS而产生问题，但是如果需要的话，有几个窍门可以让它工作。IE6应该没问题，因为它默认使用基于“边框”的框模型。(您可能需要使用z-index来使IE正常运行。如果是，那么设置.middle{ position: relative; z-index: 1}并将z-index: 2添加到左列和右列。)
position: absolute技巧确实比float更有优势，因为您的侧边栏可以出现在内容div之前或之后，从而使它成为潜在的更具语义的选项。
这些工作的原因是：( a)您的侧列是固定的，所以我们只是将填充设置为这些列的宽度，而b) position: absolute和float: [left/right]将元素从文档流中删除，这意味着就文档而言，它们不存在，没有空间。这允许其他元素移动到这些元素以前所在的位置，将它们放在另一个之上。
https://stackoverflow.com/questions/15199419
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号