，仅仅改下CSS样式就修改了布局的方式，这就是CSS布局的威力。为了实现两列的左右排列，上面的CSS将left和right的float都设置成相同的left或者right，两者缺省是紧贴在一起的，这可以通过设置两者之间的margi
属性来控制，比如为第一个例子中的left设置margi
right5px或者right设置margi
left5px。除了将left和right的float设置为相同值来实现左右排列，也可以象下面那样设置成不同的值：leftbackgrou
dcolorccccccborder1pxsolid333333width300pxheight200pxfloatleftrightbackgrou
dcolorccccccborder1pxsolid333333width300pxheight200pxfloatright只不过这样，缺省的情况下两者之间有很大的间距，这是由于两者的宽度总和小于浏览器的宽度导致的，这个可以通过增大两个div的width来缩小两者间的间距，也可以通过指定左右的margi
来设置与浏览器左右边界的间距来实现。5两列宽度自适应实现两列自适应宽度，只需要在上面的两列固定宽度中修改下width的属性值，采用百分比的形式，就可以达到左右两个div的宽度随着浏览器窗口大小的改变而改变的效果了：leftbackgrou
dcolorccccccborder1pxsolid333333width30height200pxfloatleftrightbackgrou
dcolorccccccborder1pxsolid333333width60height200pxfloatleft
f注意，上面的right的width属性没有70，而使用60，是因为一个对象的实际宽度不仅仅由width属性决定，还包括border的宽度、内间距（paddi
g）、外间距（margi
），由于上面为div设定了border的宽度为1px，如果将right的width设置为70，将会使得两个div的总宽度超过100，导致right换行显示。关于宽度的计算涉及CSS布局中的盒模型问题，这会在后面介绍。6两列右列宽度自适应两列宽度自适应的例子中，为每个div都指定了百分比的宽度就实现了宽度的自适应，要实现右列宽度自适应，只需要为左列指定固定宽度，然后将right的float和width属性去掉就可以达到目的了：leftbackgrou
dcolorccccccborder1pxsolid333333width300pxheight200pxfloatleftrightbackgrou
dcolorccccccborder1pxsolid333333height200px
f在两列固定宽度中，假如不给right指定float属性，就会出现right没有施加到right上，且right是换行显示的现象；而这里为了实现right宽度自适应，就必须去掉float属性，否则一旦加上float属性，right的宽度就会和其中的内容的实际宽度保持一致，虽然它显示在右边，奇怪的呀_。7两列固定宽度居中结合前面讲过的一列固定宽度居中、两列固定宽度，这个可以通过div的嵌套来实现：divid