一般网页布局分为一列，二列，三类，前两个都好说，那么html如何进行三列布局，其实有很多种方式(样式也有很多种，有三列等宽，还有不等宽的)，接下来，我就记录不等宽两种，第一种用到的是浮动，第二种用的是定位
工具/原料
sublimeText3
方法1：用绝对定位方式
1
先在body标签中写三个div,
300px
中间
200px
，如图：2
加载样式css,详细代码，如图：
3
讲解一下上面css,对于左侧div（.left），宽300px,高500px，背景颜色，设置定位为绝对定位，离左侧为0px，离上侧为0px；右侧div（.right）差不多；中间div(.middle)不设置宽度，是自适应，只设置高度为500px，背景，主要的是margin值（这四个值分别指上 右 下 左）。
4
最后三列效果，如图：
5
优点：中间宽度自适应
方法2：用浮动定位方式
1 如图：
先在body标签中写三个div,
300px
中间
200px
2
加载样式css,详细代码，如图：
3
讲解一下上面css,对于最外层容器div(.container)宽800px,高500px，水平居中；左侧div（.left），宽200px,高500px，背景颜色，设置浮动定位，离上侧为0px；mian div包括了中间和右侧，设置浮动定位靠左排列；中间div(.middle)宽400px,高500p高度为500px，背景，设置浮动定位靠左排列；最后右侧和左侧差不多。
4
最后三列效果，如图：
注意事项
如果对您有帮助，麻烦投个票，点个赞，谢谢
下一篇：怎样可以改变自己的脸型