作者:Fayetian 时间: 2007-03-26 文档类型:翻译 来自:蓝色理想
作者: Alan Pearce
原文: Multi-Column Layouts Climb Out of the Box
地址: http://alistapart.com/articles/multicolumnlayouts
我们都了解拥有相同高度的布局是很麻烦的事,有很多相关资料提到过相关设计方法,所以在这我就不多做解释了。
最近在研究一个两个栏目的动态布局,每个栏目背景不同。我立刻想起了Dan Cederholm的Faux Columns,但我仍然需要一个动态布局的方法。我又看了完美布局的文章One True Layout,但是有很多bug,需要许多注释和程序。甚至考虑用JavaScrip来实现栏目始终保持同一高度,但是不行。绝望之余,几乎要用table布局,不,一定还有更好的方法。我想着一个问题“盒子外面是什么”,border!如果我可以使“sidebar”(或"rail")的div相对与“content”的div浮动,就可以实现多栏目相同高度。这个方法在很多地方介绍过:Douglas Livingstone的introduced ,Holly的extended John Bergevin的Position Is Everything。由one true layout的方法发展而来,用更简洁清楚的代码 实现了两个栏目的动态变化。下面是代码:
HTML:
2<div id="container">
3 <div id="content">This is<br />some content</div>
4 <div id="rail">This is the rail</div>
5</div>
6
7CSS:
8#container{}{
9 background-color:#0ff;
10 overflow:hidden;
11 width:750px;
12}
13#content{}{
14 background-color:#0ff;
15 width:600px;
16 border-right:150px solid #f00; »
17 /**//* The width and color of the rail */
18 margin-right:-150px; /**//* Hat tip to Ryan Brill */
19 float:left;
20}
21#rail{}{
22 background-color:#f00;
23 width:150px;
24 float:left;
25}
26
给content div右加border,颜色宽度和rail一样,并相对与rail浮动。Margin:-150px;使rail div移到margin腾出的空间。如果content div变的比rail div 高,border随content div变高。视觉效果就是好像rail div也在变高。container的颜色设定和content div一样,如果rail div达到最高,container随之变高,这样就给我们content变高的效果。
看看效果。See it in action 。试改变字体大小,布局随之变化。
3个栏目:3个颜色
3个栏目的布局有点不同:直接给container div加border.
HTML:
2<div id="container">
3 <div id="center">CENTER<br />COLUMN CENTER</div>
4 <div id="leftRail">LEFT RAIL</div>
5 <div id="rightRail">RIGHT RAIL</div>
6</div>
7
8CSS:
9#container{}{
10 background-color:#0ff;
11 float:left;
12 width:500px;
13 border-left:150px solid #0f0; »
14 /**//* The width and color of the left rail */
15 border-right:200px solid #f00; »
16 /**//* The width and color of the right rail */
17}
18#leftRail{}{
19 float:left;
20 width:150px;
21 margin-left:-150px;
22 position:relative;
23}
24#center{}{
25 float:left;
26 width:500px;
27 margin-right:-500px;
28}
29#rightRail{}{
30 float:right;
31 width:200px;
32 margin-right:-200px;
33 position:relative;
34}
35
36
中间的栏目margin-right:-150px 使左边的rail div始终沿中间栏目的左沿浮动,使旁边栏目在真确的位置显示。还有一些方法可以实现,但这个方法最好,更易实现流动布局(动态布局)。
因为边栏在container div外,浮动在border上。使用overflow: hidden使之隐藏:IE不支持,Firefox可以实现。边栏不需要设置颜色,它会于container div的颜色保持一致。
流动布局
了解定宽布局之后,我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽,很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。
CSS:
2 background-color:#0ff;
3 overflow:hidden;
4 margin:0 100px;
5 padding-right:150px; /**//* The width of the rail */
6}
7* html #container{}{
8 height:1%; /**//* So IE plays nice */
9}
10#content{}{
11 background-color:#0ff;
12 width:100%;
13 border-right:150px solid #f00;
14 margin-right:-150px;
15 float:left;
16}
17#rail{}{
18 background-color:#f00;
19 width:150px;
20 float:left;
21 margin-right:-150px;
22}
3个栏目自适应布局
方法简单,不需要引用图片,没有BUG.
HTML:
2 <div id="center">Center Column Content</div>
3 <div id="leftRail">Left<br /> Sidebar</div>
4 <div id="rightRail">Right Sidebar</div>
5</div>
6
7CSS:
8
9body{}{
10 margin:0 100px;
11 padding:0 200px 0 150px;
12}
13#container{}{
14 background-color:#0ff;
15 float:left;
16 width:100%;
17 border-left:150px solid #0f0;
18 border-right:200px solid #f00;
19 margin-left:-150px;
20 margin-right:-200px;
21 display:inline; /**//* So IE plays nice */
22}
23#leftRail{}{
24 float:left;
25 width:150px;
26 margin-left:-150px;
27 position:relative;
28}
29#center{}{
30 float:left;
31 width:100%;
32 margin-right:-100%;
33}
34#rightRail{}{
35 float:right;
36 width:200px;
37 margin-right:-200px;
38 position:relative;
39}
40
效果:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]