Published at Friday, July 4, 2008.
新手: CSS三栏布局
我目前知道两种基于CSS的三栏布局方式。第一种叫“嵌套”，第二种叫“挤压”。（名目都是我自己编的）
1. 嵌套。这个简单，大部分三栏布局都用这个，我想。就是两个div（AB和C），在其中一个中嵌上两个div（A和B）。
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块。
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>
