三栏布局和两栏布局

1.三栏布局

左右固定，中间自适应

1.浮动布局

.main {
    height: 300px;
    margin:0 300px;
    background: green;
}
.left {
    float: left;
    height: 300px;
    width: 200px;
    background: red;
}
.right {
    float: right;
    width: 200px;
    height: 300px;
    background: blue;
}

<div class="container">
     <div class="left"></div>
     <div class="right"></div>
     <div class="main"></div>  
</div>

2.定位布局

.container {
    position: relative;
}
.left {
    position: absolute;
    width: 200px;
    height: 300px;
    left: 0;
    background: red;
}
.right {
    position: absolute;
    width: 200px;
    height: 300px;
    background: blue;
    right: 0
}
.main {
    height: 300px;
    background: green;
    margin:0 300px;
}

<div class="container">
     <div class="left"></div>
     <div class="right"></div>
     <div class="main"></div>
</div>

3.flex布局

.container {
    display: flex;
}
.main {
    flex:1;
    background:green;
    margin:0 100px;
}
.left {
    width: 200px;
    height: 300px;
    background: red;
}
.right {
    width: 200px;
    height: 300px;
    background: blue;
} 

<div class="container">
     <div class="left"></div>
     <div class="main"></div>
     <div class="right"></div>  
</div>

2.两栏布局

左边固定，右边自适应

1.浮动布局

.left {
    width: 200px;
    height: 300px;
    float: left;
    background: red;
}
.right {
    background: blue;
    margin-left: 300px;
    height: 300px;
}

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

2.定位布局

.container {
    position: relative;
}
.left {
    position:absolute;
    width: 200px;
    height: 300px;
    left:0;
    background: red;
}
.right {
    background: blue;
    margin-left:300px;
    height: 300px;
} 

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

3.flex布局

.container{
    display:flex;
}
.left{
    width: 200px;
    height: 300px;
    background: red;
}
.right{
    flex:1;
    height: 300px;
    background:blue;
    margin-left:100px;
} 

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