作者：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
7
CSS:8
#container{
#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
8
CSS: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:
#container{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:
<div id="container">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
7
CSS:8
9
body{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 全部选择 提示：你可先修改部分代码，再按运行]
浙公网安备 33010602011771号