方法一：采用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;(隐藏溢出的内容)
#left { float: left; width: 300px; background-color: blue; } #right { overflow: auto; background-color: red; } <div id="left">左边自适应</div> <div id="right">右边定宽</div>
方法三：使用flex布局的写法
.content{ display:flex; } .aside.left{ border:5px solid black; width:200px; } .aside.main{ flex-grow:1; border:5px solid red; } .aside { height:600px; } <div class="content"> <div class="aside left"></div> <div class="aside main"></div> </div>
方法一：与两列布局类似，左右两边设置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,中间设置 overflow:auto;和margin:0 300px;
*{ padding:0px; margin:0px; } #left,#right{ float:left; width: 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>
方法三：使用flex布局的写法
.content{ display:flex; } .aside.left{ order:1; border:5px solid black; width:200px; } .aside.left{ order:3; border:5px solid black; width:200px; } .aside.main{ order:2; flex-grow:1; border:5px solid red; } .aside { height:600px; } <div class="content"> <div class="aside left"></div> <div class="aside right"></div> <div class="aside main"></div> </div>
原文：https://www.cnblogs.com/hongchenzimo/p/11026429.html