我目前知道两种基于CSS的三栏布局方式。第一种叫“嵌套”,第二种叫“挤压”。(名目都是我自己编的)

1. 嵌套。这个简单,大部分三栏布局都用这个,我想。就是两个div(AB和C),在其中一个中嵌上两个div(A和B)。

3-column-css-based-layout

CSS代码是:

#AB { float:left; }
#A { float:left; }
#B { float:right; }
#C { float:right; }
.clear { clear:both; }

HTML代码是:

<html>
<body>
<div id="AB"></div>
<div id="A"></div>
<div id="B"></dive>
<div class="clear"></div>
<div id="C"></div>
</body>
</html>

2. 挤压。这个也不难。先让A、C漂浮在左右两边,B左右Padding出A、C的宽度,这样B就把A、C挤到两边成为中间一栏了。需要注意的是,在HTML代码中,要先A、C块,再B块。

3-column-css-based-layout

CSS代码是:

#A { float:left; width:200px; }
#B { padding:5px 200px; }
#C { float:right; width:200px; }
.clear { clear:both; }

HTML代码是:

<html>
<body>
<div id="A"></div>
<div id="C"></div>
<div id="B"></div>
<div class="clear"></div>
</body>
</html>