960.gs 的固定流体固定布局答案

【问题标题】：Fixed-Fluid-Fixed Layout for 960.gs960.gs 的固定流体固定布局
【发布时间】：2013-02-18 09:57:25
【问题描述】：

我们的网站引擎使用 960.gs 网格系统，我正在尝试将其修改为 3 列 Fixed(100px)-Fluid(max to width)-Fixed(100px) 视图。不幸的是，所有 960.gs 在线生成器都只制作或完全固定或完全流体网格。所以我正在尝试将最初生成的全流体网格修改为这个视图：

<------------100%--------------->

======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========

<-100px>                 <-100px>

代码（修改后）： http://jsfiddle.net/vZm8x/

问题 1) 我不确定如何使中心内容区域向左最大屏幕上。因为宽度：自动；根本不起作用，width:100% 只是包装 div。
问题 2) 将所有 div 固定为 100px 后，它会继续向下包裹任何事物。（显示：内联；没有任何想法？）

我的问题是：是否可以根据我们的需要修改 960.gs 模板？如果是，请给我任何建议来解决问题？提前谢谢！

【问题讨论】：

标签： css layout grid fluid-layout 960.gs

【解决方案1】：

使用固定宽度的侧栏，实际上非常简单。您将要使用浮点数，并且可能需要使用faux columns 技巧，具体取决于您的特定设计需求。

你会想要一些类似的东西：

<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;
}

See it in action here（这没有假列效果，但应该给你一个起点）。如果您使用输出更改部分的宽度，您会看到列保持不变，而内容保持在外部列的范围内。

内容列需要放在最后，因为它仍在文档流中，所以右列将在内容下方结束。

或者，您可以在侧栏上使用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+、Firefox、Chrome、Safari 和 Opera。 IE7 可能会因为使用 W3C 框模型（“内容框”）而不识别 box-sizing CSS 而出现问题，但 there are a few tricks 可能会在您需要时使其工作。 IE6 应该没问题，因为它默认使用基于“border-box”的盒子模型。（您可能需要使用z-index 来让IE 正常运行。如果是这样，则设置.middle{ position: relative; z-index: 1} 并将z-index: 2 添加到左右列。）

position: absolute 技巧确实比浮动技巧具有优势，因为您的侧边栏可以出现在内容 div 之前或之后，这使其成为可能更具语义的选项。

这些工作的原因是因为 a) 您的侧列是固定的，所以我们只需将填充设置为这些列的宽度，并且 b)position: absolute 和 float: [left/right] 将元素从文档流中取出，这意味着就文档而言，它们不存在并且不占用空间。这允许其他元素移动到这些元素曾经所在的位置，将它们叠加在一起。

【讨论】：