4

我们的网站引擎使用 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 模板？如果是，请给我任何建议来解决问题？先感谢您！

4

1 回答 1

2

使用固定宽度的侧栏，实际上非常容易。您将要使用浮点数，并且可能需要根据您的特定设计需求做一个假列技巧。

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

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

在这里查看它的实际效果（这没有假列效果，但应该给你一个起点）。如果您使用输出更改部分的宽度，您将看到列保持不变，并且内容保持在外部列的范围内。

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

或者，您可以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-sizingCSS 而出现问题，但如果您需要，可以使用一些技巧使其工作。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]元素从文档流中取出，这意味着就文档而言，它们不存在并且不占用空间。这允许其他元素移动到这些元素曾经所在的位置，将它们层叠在一起。

于 2013-03-04T14:18:29.797 回答