垂直三栏布局拥有相同高度的方法

作者: Alan PearceLUPA开源社区nM3\fO^WBjf
原文: Multi-Column Layouts Climb Out of the BoxLUPA开源社区9\)}/{%_!E-L:t;y
地址: http://alistapart.com/articles/multicolumnlayoutsLUPA开源社区9E,Oe/XIq5^ `
我们都了解拥有相同高度的布局是很麻烦的事，有很多相关资料提到过相关设计方法，所以在这我就不多做解释了。LUPA开源社区 MV/b1K%Mef5n PH%K&d
最近在研究一个两个栏目的动态布局，每个栏目背景不同。我立刻想起了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的方法发展而来，用更简洁清楚的代码 实现了两个栏目的动态变化。下面是代码：
0of;zxKddz0HTML:

CODE:LUPA开源社区|N*kNw0y+JX

LUPA开源社区Xj ^l6p"l
<div id="container">
rw\*BKs!gP0  <div id="content">This is<br />some content</div>LUPA开源社区3P*I-}`G#Vs
  <div id="rail">This is the rail</div>
o!?Hu,~C0</div>
#M0Zvh"gj5d0CSS:
Aa.w9\5i.G0#container{
vk~
?I0tD P!i0  background-color:#0ff;
h+O3Kl&V|4D#{,kG0  overflow:hidden;LUPA开源社区 R Q1n O%jk%W
  width:750px;LUPA开源社区Xj'oC2}'A4K6yK
}
{ \(^~#n l0#content{
a`A;}@;u%f0  background-color:#0ff;LUPA开源社区"t'Vu*xS{,e
  width:600px;LUPA开源社区P#CBS+uIM#k/I w
  border-right:150px solid #f00; »
1\0l$E.EFA0  /* The width and color of the rail */LUPA开源社区:a t7s[
Tr+[
  margin-right:-150px; /* Hat tip to Ryan Brill */
d&E;Ew(l I1J0  float:left;LUPA开源社区7dY1s7m i$q
}
v MS#~8R8O0#rail{LUPA开源社区%Own2VFj4RS-K3YI
  background-color:#f00;LUPA开源社区.X$a4OH"waK8I
]
  width:150px;
BC:s HE
a?0  float:left;
`C/~m/{1G M0}给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变高的效果。LUPA开源社区!mV@2muHv ^U.X
看看效果。See it in action 。试改变字体大小，布局随之变化。
pA6goh5R'Y(l#t'Ce03个栏目：3个颜色LUPA开源社区 D` J;H!j\#Ch#u9_
3个栏目的布局有点不同:直接给container div加border.LUPA开源社区5f:fs'So-fU
g!L
HTML:

CODE:

@{#z]ds0A0
CH9m#FE2Cs b]0<div id="container">LUPA开源社区)TH#Q\*? KD7n
  <div id="center">CENTER<br />COLUMN CENTER</div>LUPA开源社区c%D;S-@r
  <div id="leftRail">LEFT RAIL</div>
Qix7p5\{:a.wL5r0  <div id="rightRail">RIGHT RAIL</div>LUPA开源社区[HWG|bU
</div>
QU.\*sy/I0CSS:
C p]%R4[Ss\p{
w0#container{
@.E!Qhs$uCH0  background-color:#0ff;LUPA开源社区,a-_%U(YYYd4Y
  float:left;

E&t/gN.l;h ?0  width:500px;
|&X[O;J(x0  border-left:150px solid #0f0; »
"m pLT]@0  /* The width and color of the left rail */LUPA开源社区I.E`3J?Y LD u
  border-right:200px solid #f00; »
&v\?8P&jx0  /* The width and color of the right rail */LUPA开源社区9OW6@YR
}
O6Z/d4yt$C@
L0#leftRail{
!w%P+K A P0  float:left;LUPA开源社区*n&[2B
] ^J
  width:150px;LUPA开源社区?{8bd*\ ~k
  margin-left:-150px;LUPA开源社区A7t9lr4VL2L
  position:relative;LUPA开源社区"o[[U5S0V_n9b
}LUPA开源社区`+SLz?.smnA`
#center{
R[aF)U i v0  float:left;
4|xHyT:}0  width:500px;
sR lL~$\yp6[0  margin-right:-500px;LUPA开源社区!drA[c5w2|OE
}
uZ]3\5h6`0?0#rightRail{LUPA开源社区8maA;IIEoKS#t
  float:right;LUPA开源社区k1|_/BI` g
  width:200px;
Eh^!?x2u5F0  margin-right:-200px;
|
Xl0S$a"X{d0  position:relative;
1v ehe/XU+K0}中间的栏目margin-right:-150px 使左边的rail div始终沿中间栏目的左沿浮动，使旁边栏目在真确的位置显示。还有一些方法可以实现，但这个方法最好，更易实现流动布局（动态布局）。
3eq2W`'y/Y8h
{0因为边栏在container div外，浮动在border上。使用overflow: hidden使之隐藏：IE不支持，Firefox可以实现。边栏不需要设置颜色，它会于container div的颜色保持一致。LUPA开源社区pV6MPrDxUA
流动布局LUPA开源社区1w4E-^%J/Nf)x
了解定宽布局之后，我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽，很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。LUPA开源社区
ck2^-x!Up
CSS:

CODE:LUPA开源社区)W1R:yHf1Ex5K0ht3T6K

#container{
2I%R8Yv+gV;@0  background-color:#0ff;LUPA开源社区q&QlMW_s
  overflow:hidden;
5E!Dyan `0  margin:0 100px;LUPA开源社区n8Y4X1P V?1s
  padding-right:150px; /* The width of the rail */LUPA开源社区,XRga;],]v)k_{0dH
}LUPA开源社区E/H%e4k~
* html #container{LUPA开源社区AS
nxL-h&Q
  height:1%; /* So IE plays nice */
l#~ Y Yr0}
U#Ea1h-Y'?"\DJ @0#content{

Am ]/Po3k0  background-color:#0ff;LUPA开源社区NY8RXah`M
  width:100%;LUPA开源社区-z[kVDRs
  border-right:150px solid #f00;
}lUS ?zkke0  margin-right:-150px;
QEPc@U0  float:left;
[|g+H&{0[ b!V0}LUPA开源社区L%SZ9[n|E
#rail{
&nv$vL tZA4J2E0  background-color:#f00;
9yOo1fAI[0G0  width:150px;LUPA开源社区,lp#b3Ob3OyY
  float:left;LUPA开源社区 WFqE5R)J7f5f,O
  margin-right:-150px;LUPA开源社区o+EBTaY&?
}3个栏目自适应布局
iL$u:UcH0方法简单，不需要引用图片，没有BUG.LUPA开源社区?9G@`+?|
HTML:

CODE:

zE;@$FVG#T0LUPA开源社区3z-h)l{bU,uT rsb
<div id="container">
]%^7YxP0  <div id="center">Center Column Content</div>
#Uv&c^}(_0  <div id="leftRail">Left<br /> Sidebar</div>LUPA开源社区3M O4K$a fjd+y M
  <div id="rightRail">Right Sidebar</div>
^ y/Cq(WJ*N+B?7uI0</div>

CODE:

*qwBpYy0CSS:LUPA开源社区o]m:] D_X
body{LUPA开源社区
XX t(M6R
  margin:0 100px;LUPA开源社区#I0T!a2I8i,kW
  padding:0 200px 0 150px;
-B7C h R wd-R
mG0}
{I;?l$ExjK0#container{
qW8}%E:k-lN5D0  background-color:#0ff;
`;jt#X+\6qKcX0  float:left;LUPA开源社区7JP&J,t,D
  width:100%;    LUPA开源社区(oewNlU[i
  border-left:150px solid #0f0;
Y_7J*Z@)m0  border-right:200px solid #f00;LUPA开源社区{"K|(a t
  margin-left:-150px;LUPA开源社区#Ox#?|@M&P
  margin-right:-200px;LUPA开源社区"a4CNX"C.X1dQ%K
  display:inline; /* So IE plays nice */
5w9Sf%f"kQ)`xHN0}LUPA开源社区^zr4i FS4J%m
#leftRail{LUPA开源社区;qx/r p'|Z
  float:left;
uZ(v4k%V_^Em0  width:150px;LUPA开源社区)z+p:sw`}[;m|:R
  margin-left:-150px;
9Sc:k;a)NQ0  position:relative;LUPA开源社区*~-hsw
|p XP
}LUPA开源社区5B#F!]*~1h)Y6{i
#center{LUPA开源社区 GhpF)L4o
  float:left;LUPA开源社区7k*M?7^#mv
  width:100%;LUPA开源社区L#F_ YKCt*@
  margin-right:-100%;
O1E,]OT)apI1}0}LUPA开源社区M'^r L)l`
#rightRail{LUPA开源社区6hF+no;fe.?
  float:right;
@'B4H)DO2L^&Q0  width:200px;LUPA开源社区9mpj*@.n/d%w
  margin-right:-200px;LUPA开源社区([H0R0j9[+o%[TW
  position:relative;LUPA开源社区*d#a*}0x8e:Gj#F
}复制以下内容别存为*.html查看效果

CODE:

._d~9Ozez\f|0
7E kv9\/I|d7e'^0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

p,j![eL R&I"B0<html xmlns="http://www.w3.org/1999/xhtml">
xtAB u3EYh!v8sJ0<head>
9XH
^/U w:Gn0<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />LUPA开源社区2A5z3U&PN8U
<title>css</title>
K Yd
LC8D*T n0vW0<style type="text/css">LUPA开源社区:q8?_e`` [{
<!--
kvVH(O)v)]D'k3k0body{
j3T?%x/T0  margin:0 100px;LUPA开源社区!x"ySN)v@+P]X%FR
  padding:0 200px 0 150px;
m|$T!mDeq0}LUPA开源社区^(~,\9Z ~+ZJ4k
#container{LUPA开源社区7gq"? yT"VJL
  background-color:#0ff;LUPA开源社区eN}+ud*B`:{fO;m
  float:left;LUPA开源社区?5_ulu
  width:100%;    LUPA开源社区4L!B+C1Eb&b
  border-left:150px solid #0f0;LUPA开源社区'j/xu)H
L$v9E
  border-right:200px solid #f00;
4dX.yU
Y3A^j0  margin-left:-150px;
o9A%Z.ze1?hT0  margin-right:-200px;LUPA开源社区b;n!GR1ha-E
  display:inline; /* So IE plays nice */LUPA开源社区.L'_.c XS){
}
b)^ u7bF~W0#leftRail{
!Sfk)m!]|4Q2I*A0  float:left;LUPA开源社区"o8^C#kI([
  width:150px;
*c0V.hB]XSGM0  margin-left:-150px;
e)MxFPDY0  position:relative;
RotP#EO0}LUPA开源社区2BF5z~-T
#center{LUPA开源社区YWBft1d be FF
  float:left;
"Mkc;A0ey o x%t$A-{0  width:100%;
@'W H*m@0LQMY0  margin-right:-100%;
zv S:yw*cE,A1a(n0}
/z;q+~m.sz"w R8Q0#rightRail{
.k5U5b#[o)? i(n#c3F0  float:right;LUPA开源社区9?8pIcVQynU%?
  width:200px;
$v` B,Qw0  margin-right:-200px;
W!Eah!m&XT#MB0  position:relative;LUPA开源社区1s"F;H!_2NP9E |xo
Y7u
}
h9p/?&I i0-->LUPA开源社区'rrj9V,b'@
</style>
V`9]'vY8sJ%q0</head>LUPA开源社区i*T
Va6Myl
<body>
~d_+?b(nz0<div id="container">
s
~"S5U0pk0  <div id="center">Center Column Content</div>
gQ"lD({y){7l0  <div id="leftRail">Left<br /> Sidebar</div>
Z3H~V-P0  <div id="rightRail">Right Sidebar</div>
!d:?:@'l?/i{Kt0</div>
7^T4e5seQT0</body>LUPA开源社区e cth7f.d
</html>[ 本帖最后由 loveb 于 2007-3-28 15:02 编辑 ]