常见的两列布局和三列布局

 

（1）两列布局
方法一：采用position：absollute;并设置margin-left的值。

 

<div id="box">
  <div id="left">左边定宽</div>
  <div id="right">右边自适应</div>
</div>

#box {
    position: relative;
}
#left{
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    background:#F00;
}
#right{
    margin-left:300px;
    background:#0FC;
}

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

<div id="left2">左边定宽</div>
<div id="right2">右边自适应</div>
#left2 {
    float: left;
    width: 300px;
    background-color: blue;
}
#right2 {
    overflow: auto;
    background-color: red;
}

方法三：采用bootstrap布局（需要引入.ccs和.js）

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

方法四：采用flex布局

.box{
    width: 100%;
    display: flex;
    height: 300px;
}
.left{
    width: 100px;
    height: 200px;
    background-color:red;
}
.right{
    flex: 1;
    height: 300px;
    background-color:lime;
}



<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>

（2）三列布局
 方法一：左右两边设置position: absolute；和top:0;left:0;right:0; 中间设置margin即可

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

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

#left,#right{
    overflow:auto;
    width: 300px;
    background-color: red;
}
#left{ 
    float:left; 
}
#right{ 
    float:right;
}
#center{ 
    margin:0 300px;
    background-color:aquamarine;
}
<div id="left">左边定宽</div>
<div id="right">右边定宽</div>
<div id="center">中间自适应</div>

方法三：采用bootstrap布局（需要引入.ccs和.js）

方法四：采用flex布局

.container {
  width: 100%;
  display: flex;
  height: 200px;
}

.left, .right {
  border: 1px solid #ccc;
  width: 200px;
}

.center {
  flex: 1;
  border: 1px solid #ccc;
}

<div class="container">
    <div class="left">s</div>
    <div class="center">w</div>
    <div class="right">w</div>
</div>