logo标签列表

960.gs的Fixed-Fluid-Fixed布局

csslayoutgridfluid-layout960.gs
4
我们的网站引擎使用960.gs网格系统，我正在尝试将其修改为三列固定（100像素）-流体（最大宽度）-固定（100像素）视图。不幸的是，所有960.gs在线生成器只能生成完全固定或完全流体的网格。因此，我正在尝试修改最初生成的完全流体网格以实现这种视图：
<------------100%--------------->

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

<-100px>                 <-100px>

代码（修改后）： http://jsfiddle.net/vZm8x/ 问题1：我不确定如何使中央内容区域最大化到屏幕左侧。因为width:auto;根本不起作用，width:100%只是包裹div。
问题2：将所有div固定为100px后，它继续向下包裹任何东西。（display:inline;没有帮助，有什么想法吗？）
我的问题是：是否可以根据我们的需要修改960.gs模板？如果可以，请给我任何修复问题的建议？提前感谢您！
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。由于使用W3C盒模型（“content-box”）并且无法识别box-sizing CSS，因此IE7可能会出现问题，但是如果需要，有一些技巧可以使其正常工作。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]将元素从文档流中移出，这意味着在文档方面，它们不存在且不占用空间。这使得其他元素可以移动到那些元素曾经存在的位置，将它们彼此覆盖。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接