그까짓 일을 안배하다

1. 두 열의 왼쪽은 너비를 고정시키고 오른쪽은 스스로 적응한다.

     

        
left
     
     

        
right
     

1.float+margin

  
.left {
   float:left;
   width:100px;
   height:100%;
}
.right {
   height:100%;
   margin-left:100px;
}
      

2.float+overflow

.left {
   float:left;
   width:100px;
   background:red;
}
.right {
   overflow:hidden;
   background:yellow;
}

3.flex

.parent{
   display: flex;       
}
.left{
   background: red;
   width: 100px;
}
.right{
   background: yellow;
   flex-grow: 1;
}  

2.3열 좌우 고정, 중간 적응

1.流式

.left{
   float:left;
   background:red;
   width:100px;
   height:100px;
   } 
.right{
   float:right;
   background:black;
   width:100px;
   height:100px;
   }
.center{
   background: yellow;
   margin-left:100px;
   margin-right: 100px;
   height:100px;
   }

2.BFC

.center{
background: yellow;
height:100px;
overflow: hidden;
}

3.Flex

.container{
   width: 100%;
   height:100px;
   display: flex;
}
.left{
 background:red;
 width:100px;
}
.right{
  background:black;
  width:100px;
  order:2;
}
.center{
  background:yellow;
  flex-grow:1;
  order:1;
}

4.absolute

.container{
  width: 100%;
  position: relative;
}
.left{
   background:red;
   width:100px;
   height:100px;
   position:absolute;
   left:0;
   top:0;
}
.right{
    background:black;
    width:100px;
    height:100px;
    position:absolute;
    right:0;
    top:0;
}
.center{
    background:yellow;
    margin:0 100px;
    height:100px;
}