html如何将页面分成三列,如何进行CSS网页布局（一列，二列，三列，混合）

1.两列自适应宽度：

body{margin: 0;padding: 0;}/清除默认样式/

.left{width: 20%; height: 500px; background: red; float: left;}

.right{width: 80%; height: 500px; background: blue; float: right;}

两列自适应布局：会随着浏览器窗口宽度改变。width：百分比 ；loat，用的少，一般使用的是固定宽度的两列布局

2.固定宽度的两列布局：

body{margin: 0;padding: 0;}

.main{width: 800px;margin: 0 auto;}

.left{width: 200px; height: 500px; background: red; float: left;}

.right{width: 600px; height: 500px; background: blue; float: right;}

固定宽度的两列布局：给他们加个固定宽度的父元素盒子

3.三列布局：

1、三列完全自适应宽度：①3个宽度为百分比；②第一个div的浮动：float:left；第二个div的浮动：float:left；第三个div的浮动：float:right.

2、两边固定、中间自适应的三列布局：①两边宽度输入固定值，中间宽度去掉；中间自适应。需要两边用绝对定位absolute

三列布局，左右固定宽带，中间自适应。不能使用浮动，要使用绝对定位

body{margin: 0;padding: 0;}

.left{width: 200px; height: 500px; background:#ccc; position: absolute; left: 0; top: 0; }

.mid{ height: 500px; background: gray; }

.right{width: 200px; height: 500px; background:#ddd; position: absolute; right: 0; top: 0; }

还可以修改中间div的margin来设置列间距：

.mid{ height: 500px; background: gray; margin: 0 210px;}

4混合布局：.

body{margin: 0;padding: 0;}

.top{height: 100px;background: blue;}

.main{height: 400px;width: 800px;margin: 0 auto;}

.left{height: 400px;width: 200px;background: red;float: left;}

.right{height: 400px;width: 600px;background: yellow;float: right;}

.foot{height: 100px;width: 800px; background: blue;margin: 0 auto;}