css – 960.gs的固定流体固定布局

2019年8月4日 198次阅读

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

最佳答案 对于固定宽度的侧柱,它实际上非常容易.您将需要使用浮动,并且可能需要执行
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盒子模型(“内容盒”)而没有识别盒子大小的CSS而出现问题,但是如果需要的话,可以使用there are a few tricks使其工作. IE6应该没问题,因为它默认使用基于“边框”的盒子模型. (您可能需要使用z-index来使IE运行.如果是,则设置.middle {position：relative; z-index：1}并将z-index：2添加到左侧和右侧列.)

位置：绝对技巧确实优于浮动技巧,因为你的侧边栏可以出现在内容div之前或之后,使其成为可能更具语义性的选项.

这些工作的原因是因为a)你的侧栏是固定的,所以我们只是将填充设置为那些列的宽度,b)位置：绝对和浮点数：[左/右]从文档流中取出元素,这意味着就文件而言,它们不在那里而且没有空间.这允许其他元素移动到那些元素曾经的位置,将它们层叠在一起.

点赞