Fatal编程技术网
  • css/
  • Css 960.gs的固定流体固定布局

Css 960.gs的固定流体固定布局

css layout grid

Css 960.gs的固定流体固定布局,css,layout,grid,fluid-layout,960.gs,Css,Layout,Grid,Fluid Layout,960.gs,我们的网站引擎使用960.gs网格系统，我正在尝试将其修改为3列固定（100px）-流体（最大宽度）-固定（100px）视图。不幸的是，所有960.gs在线发电机都只制造或完全固定或完全流体网格。因此，我尝试将最初生成的完整流体栅格修改到此视图： <------------100%---------------> ======== =============== ======== | fixed| |max to screen| |fixed | ======== ========

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

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

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

<-100px>                 <-100px>


======== =============== ========
|固定| |最大到屏幕| |固定|
======== =============== ========
代码（修改后）：

  • 问题1）我不确定如何使中央内容区向左最大 在屏幕上。因为宽度：自动；根本不起作用，宽度：100%仅包装div
  • 问题2）在修复为100px所有div后，它继续向下缠绕 任何东西（显示：内联；对任何想法都没有帮助？）
我的问题是：是否可以根据我们的需要修改960.gs模板？如果是，请给我一些建议来解决问题？提前谢谢你

使用固定宽度的侧栏，实际上非常简单。您将要使用浮动，并且可能需要做一些技巧，这取决于您特定的设计需要

您将需要以下内容：

<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>
（这没有人造柱效果，但应该给您一个起点）。如果使用输出更改节的宽度，将看到列保持不变，而内容保持在外部列的范围内

内容列必须是最后一列，因为它仍然在文档流中，所以右边的列将位于内容下面

或者，您可以使用
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;
}



.wrapper{
position:relative；/*约束其父级中的列。如果父级为*/
}
.左{
位置：绝对位置；
排名：0；
左：0；
}
.对{
位置：绝对位置；
排名：0；
右：0；
}
.中{
填充：0 100px；
}
div{
-moz框大小：边框框；
框大小：边框框；
}


这些技巧将适用于IE8+、Firefox、Chrome、Safari和Opera。IE7可能会因为使用W3C盒子模型（“内容盒”）而出现问题，并且无法识别
盒子大小
CSS，但是如果您需要它，IE7会让它工作。IE6应该可以，因为它默认使用基于“边框框”的框模型。（您可能需要使用
z-index
使IE正常工作。如果是这样，请设置
.middle{position:relative；z-index:1}
并将
z-index:2
添加到左右列。）


position:absolute
技巧确实比float技巧有优势，因为您的边栏可以出现在content div之前或之后，这使得它可能是更具语义的选项

之所以这样做，是因为a）您的边列是固定的，所以我们只需将填充设置为这些列的宽度，b）位置：绝对
和
浮动：[左/右]
将元素从文档流中移除，这意味着就文档而言，它们不在那里，也不占用空间。这允许其他元素移动到这些元素以前所在的位置，将它们彼此重叠


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