一、两列布局:
1.左边定宽,右边自适应。
方法一:采用position:absollute;并设置margin-left的值。
例:
#left{
position:absolute;
300px;
top:0px;
left:0px;
background:#F00;
}
#right{
background:#0FC;
margin-left:300px;
}
<div id="left">左边定宽</div> <div id="right">右边自适应</div>
方法二:采用float;并设置overflow:auto;(隐藏溢出的内容)
例:
#left { float: left; 300px; background-color: blue; } #right { overflow: auto; background-color: red; } <div id="left">左边自适应</div> <div id="right">右边定宽</div>
二、三列布局:
方法一:与两列布局类似,左右两边设置position:absolute;和top:0;left:0;right:0;
中间设置margin-left和margin-right即可.
*{ padding:0px; margin:0px; } #left,#right{ position:absolute; 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,中间设置 overflow:auto;和margin:0 300px;
*{ padding:0px; margin:0px; } #left,#right{ float:left; 300px; background-color: #0FC; } #right{ overflow:auto; float:right; } #main{ margin:0 300px; background-color:#999; } <div id="left">左边定宽</div> <div id="right">右边定宽</div> <div id="main">中间自适应</div>
ps:欢迎指正优化