Dreamweaver8系列DIV+CSS教程表格二列和三列布局

2026/4/28 22:25:05

这就是如何应用浮动实现两列布局的原理。那么三列呢？

六、三列自适应宽度

三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下

增加以下css样式：

#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

把原来#main样式的width:70%去掉，然后设置左右外边距各120px，让出左右列的宽度

#main { background: #99FFFF; height: 300px; margin:0 120px; }

预览一下效果如下：

也许预览出来的效果和我的不一样，别急，还有一项设置，默认body是有外边距的，所以这里还得设置body的外边距为0；点击css面板上的新建按钮，然后在新建面板中选择：标签（重定义标签外观），然后选择body，设置body的边界为0即可。 body { margin:0;} 提示：可以先修改部分代码后再运行七、三列固定宽度

Dreamweaver8系列DIV+CSS教程表格二列和三列布局.doc 将本文的Word文档下载到电脑

下载这篇word文档