Question

我们的网站引擎使用960.gs网格系统，我试图将其修改为3列固定（100px）-Fluid（最大到宽度） - 固定（100px）视图。不幸的是，所有960.gs在线发电机都可以制造刚性或全固定或全流体网格。所以我正在尝试修改最初生成的全流体网格到这个视图：

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

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

<-100px>                 <-100px>

守则（修改后）： http://jsfiddle.net/vZm8x/

问题1）我不知道如何将中央内容区域最大化为左侧屏幕上。因为宽度：自动;根本不起作用，宽度：100％只包装div。
问题2）固定到100px后所有div继续包装任何东西。（显示：内联;没有任何想法？）

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

Answer 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应该没问题，因为它默认使用基于“边框”的盒子模型。（您可能需要使用z-index来使IE运行。如果是，请设置.middle{ position: relative; z-index: 1}并将z-index: 2添加到左侧和右侧列。）

position: absolute技巧确实优于浮点数，因为你的侧边栏可以出现在内容div之前或之后，这使得它成为可能更具语义性的选项。

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

固定流体固定布局，适用于960.gs

1 个答案: