两列布局：

1.左边定宽，右边自适应。

方法一：采用position：absollute;并设置margin-left的值。

例：

#left{ position:absolute; width:300px; top:0px; left:0px; background:#F00; } #right{ background:#0FC; margin-left:300px; } <div id="left">左边定宽</div> <div id="right">右边自适应</div>

方法二：采用float;并设置overflow:auto;(隐藏溢出的内容，触发bfc)

例：

#left { float: left; width: 300px; background-color: blue; } #right { overflow: auto; background-color: red; } <div id="left">左边自适应</div> <div id="right">右边定宽</div> 方法三，采用float+margin .wrapper .left{float: left;width: 200px;background: dodgerblue} .wrapper .right{margin-left: 200px;background: darkseagreen} <div class="wrapper"> <div class="left">左边定宽</div> <div class="right">右边自适应</div> </div>

方法四，采用float+margin（fix）

.wrapper .left3{float: left; width: 200px;background: dodgerblue} .wrapper .right3{ overflow: hidden; background: darkseagreen; } <div class="wrapper"> <div class="left2">左边定宽</div> <div class="right2"> <div class="right-fix">右边自适应</div> </div> </div>

方法五，采用负margin值

.mainBox { float: left; width: 100%; background-color: #FFFFFF; } /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */ .mainBox .content { margin: 0 210px 0 0; background-color: #000000; } /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置 */ .sideBox { float: left; width: 200px; margin-left: -200px; background-color: #666666; } /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */ <div class="container"> <div class="mainBox"> <div class="content">主要内容区域</div> </div> <div class="sideBox">侧边栏</div> </div> 采用table

三列布局(两边定宽，中间自适应)

方法一：与两列布局类似，左右两边设置position：absolute；和top:0;left:0;right:0;

中间设置margin-left和margin-right即可.

*{ padding:0px; margin:0px; } #left,#right{ position:absolute; width: 300px; top:0; background-color: #0FC; } #left{ left:0; } #right{ right:0; } #main{ margin:0 300px; background-color:#999; } <div id="left">左边定宽</div> <div id="main">中间自适应</div> <div id="right">右边定宽</div>

方法二：左右采用float,中间设置margin:0 300px;

*{ padding:0px; margin:0px; } #left,#right{ float:left; width: 300px; background-color: #0FC; } #right{ float:right; } #main{ margin:0 300px; background-color:#999; } <div id="left">左边定宽</div> <div id="right">右边定宽</div> <div id="main">中间自适应</div>

方法三，负边距

.container { text-align: center; color: #FFFFFF; } .mainBox { float: left; width: 100%; background-color: #FFFFFF; } /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */ .mainBox .content { margin: 0 210px 0 310px; // 将 210px 和 310px 分别修改为 百分数，可以得到左侧定宽右侧及中间自适应、三列宽度自适应布局 background-color: #000000; } /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置给左右两列 */ .subMainBox { float: left; width: 300px; margin-left: -100%; background-color: #666666; } /* 将次要内容区域设置左浮动，并设置宽度为300px，负边距为左边的-100% */ .sideBox { float: left; width: 200px; margin-left: -200px; background-color: #666666; } /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */ <div class="container"> <div class="mainBox"> <div class="content">主要内容区域</div> </div> <div class="subMainBox">次要内容区域</div> <div class="sideBox">侧边栏</div> </div>