Div之家_Div+CSS学习_SEO_Design_web2_站长工具_

热门搜索关键字： div 教程导航 ie 网站 css

WEB标准技术学习-跳出盒子思考

作者：佚名来源：网络（转载请注明）

跳出盒子思考

时间: 2007-11-22 16:37:38　浏览：1559　

多栏，等栏高，固定或者是液体的中间栏，简洁的HTML和css。不需要任何图片。

原文链接：Multi-Column Layouts Climb Out of the Box
翻译链接：跳出盒子思考

当试图建立一个等高的多栏布局的时候会产生许多问题，我们都知道这一点。这在其它的地方已经有很好的、详细的文档记录了，在这里就不详细叙述了。

我最近做的一个项目需要一个两栏的弹性布局，而且两栏的高度必须保持一致，却又使用不同的背景颜色。通常情况下，我们是没有办法区分哪一栏更高的。我马上想到了Dan Cederholm的Faux Columns，但是我需要一个弹性的布局。我也看了One True Layout，不过这个看起来有bug，并且对我的口味来说，它需要太多的多于标签和hack。我甚至想到了使用Javascript来确保两栏有同样的高度，但是那让人感觉不爽。情急之下，我差点用了table(唉！)。

不，一定有更好的方法。我只是需要“跳出盒子(outside the box)思考”。什么是跳出盒子呢？边框(Borders)。如果我可以让 “sidebar”(或者叫“rail”) div浮动到“content” div 的边框上，我就可以模拟出等高栏，无论哪一栏更高。

如果听起来耳熟，可能是因为这种方法的另一个版本曾被 Douglas Livingstone 提到，并且被Position Is Everything的 Holly 和 John Bergevin 进一步扩展。尽管以相同的核心理论为基础，这里阐述的方法使用更简洁的，更少嵌套层次的代码，包含了几种弹性的双栏布局，而且因为在后 One-True-Layout 时代开发，我们也从中得到了一些好处。代码如下：
The HTML:

<div id="container">
  <div id="content">This is<br />some content</div>
  <div id="rail">This is the rail</div>
</div>

The css:

#container{
  background-color:#0ff;
  overflow:hidden;
  width:750px;
}
#content{
  background-color:#0ff;
  width:600px;
  border-right:150px solid #f00; »
  /* The width and color of the rail */
  margin-right:-150px; /* Hat tip to Ryan Brill */
  float:left;
}
#rail{
  background-color:#f00;
  width:150px;
  float:left;
}

我在 content div 上创建了一个和rail颜色相同，宽度相同的右边框，然后再把rail div 浮动到上面。 content div 的 "margin-right:-150px"使得 rail div 可以移动到新产生的空白上。如果 content div 比 rail div高，那么随着它增长的边框使得我们感觉好像rail在增长。我把 container 的背景色设置为与content一致，所以如果 rail div 更高，container 就会随着它增长，看起来好像 content 栏在增长。只需要改变一点点CSS代码就可以让 rail 左对齐，无论 content 和 rail 哪一个高。

看看使用中的例子或者是弹性版本；试着改变你的字体大小，观察布局是如何改变的。

三栏:三色

三栏的布局需要采取一点不一样的措施：直接设置 container 的边框属性。(其实我在两栏的时候就可以使用这种方法，只是当时没想到)
The HTML:

<div id="container">
  <div id="center">CENTER<br />COLUMN CENTER</div>
  <div id="leftRail">LEFT RAIL</div>
  <div id="rightRail">RIGHT RAIL</div>
</div>

The css:

#container{
  background-color:#0ff;
  float:left;
  width:500px;
  border-left:150px solid #0f0; »
  /* The width and color of the left rail */
  border-right:200px solid #f00; »
  /* The width and color of the right rail */
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:500px;
  margin-right:-500px;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

提示：您可以先修改部分代码再运行

。

中间栏的 right margin 设置为 -500px。这使得左侧的 rail div 浮动到紧挨中间栏的的左侧。负的margin让侧边栏移动到正确的位置。有几种方式来实现这种效果，不过这种方法在我们一会儿实现液体布局的时候表现的最出色。

我让 container div 浮动以实现栏高，而不是设置 overflow:hidden。这是因为侧边栏 divs 在 container 的外侧，浮动到它的边框上，所以他们会被overflow设置隐藏：IE并不隐藏它们，但是Firefox，准确无误地，隐藏它们。

分栏不需要设置背景色，因为颜色设置由 container div 来设置，它随着最高的分栏增长，等高的假象就这样实现了。

液体布局

制作完了固定宽度的布局，我决定尝试用同样的技巧做一个液体的布局。侧边栏仍然需要是固定宽度的，因为浏览器并不能处理一个百分比宽度的边框设置，但是我们可以让中间栏变成液体的。
The css:

#container{
  background-color:#0ff;
  overflow:hidden;
  margin:0 100px;
  padding-right:150px; /* The width of the rail */
}
* html #container{
  height:1%; /* So IE plays nice */
}
#content{
  background-color:#0ff;
  width:100%;
  border-right:150px solid #f00;
  margin-right:-150px;
  float:left;
}
#rail{
  background-color:#f00;
  width:150px;
  float:left;
  margin-right:-150px;
}

提示：您可以先修改部分代码再运行

代码与两栏，固定宽度的版本是一样的，只是添加了一些额外的内容来看看换行之后会有什么效果。CSS代码改变不多:固定宽度版本的container不再有width属性，我添加了“height:1%”以使得IE正确地处理“overflow:hidden”。(我使用了星号* html hack，其实也可以使用条件注释 conditional comments 为IE包含专门的样式表)

我还添加了 margin 好在边上创建一些空白区域。“padding-right”属性减小了content div占据的空间：既然 content div 的width设置为100%，如果没有 container 没有 padding 属性，sidebar div 就会拍到 container 的外部并且被隐藏起来。最后，content div 从固定宽度变为100%，再给 sidebar div 添加“margin-right:-150px”属性。

就像两栏，固定宽度的布局一样，左侧侧边栏版本只需要对CSS做一点点修改。我添加了简单的 header 和 footer，你可以看看源代码。

三栏液体布局

一个有三个分栏，各分栏等高的布局有许过多名号：“Holy Grail”, “One True Layout”, “pain in the @$”...下面的技巧相比之下没有什么损失，用合适的内容顺序，不需要使用图片，而且看起来没有bug。
The HTML:

<div id="container">
  <div id="center">Center Column Content</div>
  <div id="leftRail">Left<br /> Sidebar</div>
  <div id="rightRail">Right Sidebar</div>
</div>

The css:

body{
  margin:0 100px;
  padding:0 200px 0 150px;
}
#container{
  background-color:#0ff;
  float:left;
  width:100%;
  border-left:150px solid #0f0;
  border-right:200px solid #f00;
  margin-left:-150px;
  margin-right:-200px;
  display:inline; /* So IE plays nice */
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:100%;
  margin-right:-100%;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

这次 margin 和 padding属性被设置在 body 上。margin 把布局从屏幕边缘推离一些，padding 则恰恰是sidebar的宽度。剩下的区域就是 container 可以占据的宽度：浏览器宽度的100%再剪掉 margin 和 padding。我给 container div 设置了边框以及与边框宽度相同的负margin。这样边框就被移动到 body 的 padding 上，一切布局都到了正确的位置。之后我们就可以为div定位了。

下面的例子显示了一个嵌套的两栏液体布局，包括基本的 header 和 footer。查看源代码就可以发现把内容放到合适的位置，然后添加样式是多么的简单。嵌套的两栏布局使用了 container 的边框技巧。这让我可以给 content 添加一个2px的左边框，然后再给边栏设置一个2px的右边框，再让他们重叠起来，在他们之间创建一个同等高度的 divider 。divider 会随着最高栏的高度增长。

如果你做事太专心了，你可以把分栏的div删除，仍然保持一切内容处在正确的位置上。因为分栏实际上就是container div的边框，它们仍然可以正常工作。如果你还是不太满意，你甚至完全可以把container也删除，直接把边框设置给body，不使用 container div 就实现等高的三栏液体布局！唯一的缺点就是中间栏的背景颜色不可以和body的其它部分设置不同的背景颜色——而且删除cantainer让定位和设置样式变得更有难度……但是还是可以做得到的。

我需要再次提一下，这些技巧只适应于固定宽度的边框，因为只有Opera允许你把边框设置为百分比。而且，边框不能用图片做背景，但是CSS的border-image property可能会改变这种局面。

现在它就属于你了：多栏，等栏高，固定或者是液体的中间栏，简洁的HTML和CSS。只需要一点盒子之外的思考。

Div之家

Div之家_Div+CSS学习_SEO_Design_web2_站长工具_

WEB标准技术学习-跳出盒子思考

Div+CSS布局 div代码 css链接 Div+CSS视频 Div+css教学 JS特效 css导航菜单 JS综合特效 按钮特效 菜单脚本 Web2 网页技巧

Div+CSS布局 div代码 css链接 Div+CSS视频 Div+css教学 JS特效 css导航菜单 JS综合特效按钮特效菜单脚本 Web2 网页技巧