我知道如何让2个divs并排浮动，简单地浮动一个到左边，另一个到右边。
但是如何用3个div来做这个，或者我应该只用表来做这个目的吗?
当前回答
我通常只是把第一个浮动到左边，第二个浮动到右边。第三个自动在它们之间对齐。
<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
其他回答
你可以为它们设置float: left，并将宽度设置为33.333%
只要给它们一个宽度和float: left;，这里有一个例子:
<div style="width: 500px;">
<div style="float: left; width: 200px;">Left Stuff</div>
<div style="float: left; width: 100px;">Middle Stuff</div>
<div style="float: left; width: 200px;">Right Stuff</div>
<br style="clear: left;" />
</div>
我通常只是把第一个浮动到左边，第二个浮动到右边。第三个自动在它们之间对齐。
<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>
我更喜欢这种方法，浮动在旧版本的IE中支持很差(真的吗?…)
.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }
更新: 当然，要使用这种技术，由于绝对定位，你需要在容器上封装div，并做后处理来定义if的高度，类似这样:
jQuery(document).ready(function(){
jQuery('.main').height( Math.max (
jQuery('.column-left').height(),
jQuery('.column-right').height(),
jQuery('.column-center').height())
);
});
这不是世界上最神奇的东西，但至少不会砸到老的ie。
<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>
<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>
这种方法的优点是你可以设置每一列的宽度，只要你保持在100%以下，如果你使用3 x 30%，剩下的10%被分割为5%的分隔空间列之间
