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 Eve候就可以使用这种方法，只是当时没想到) 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; } 提示：您可以先修改部分代码再运行 我还添加了 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。只需要一点盒子之外的思考。 |
