CSS三栏布局两侧定宽中间自适应-float

代码结构

左右设置固定宽度.left,.right{ width:300px; height:300px; }

左侧左浮动.left{ float:left; background:#FF9966; }背景颜色方便观察

右侧右浮动.right{float:right;background: #CCCC00;}背景颜色方便观察

中间设置margin值，将两侧的布局留出来.center{ margin:0 300px; background:#996600; }背景颜色方便观察

查看效果改变窗口的大小，可以看到两侧为固定宽度，中间则自适应显示

全部代码

说明一下步骤一中强调左右中的目的先看一下如果我们按左中右的顺序是什么效果，如下图这是因为我们需要先将左侧元素与右侧元素优先渲染，最后渲染中间部分，才能将中间元素调整到正确的位置。但是左右中这样的布局有一个不友好的问题，中间用来显示主要页面内容的部分反而放到最后来渲染，所以在页面内容较多时会影响到用户体验。