本文共 1966 字，大约阅读时间需要 6 分钟。

两栏布局：左边定宽，右边自适应

   
    
    
     left
    
    
    
     right
    
  
   

1. float + margin-left

.left {
   	      float: left;	      width: 200px;	      height: 200px;	      background-color: aquamarine;	    }    .right {
   	      margin-left: 200px;	      height: 200px;	      background-color: antiquewhite;    }

2. float + overflow：hidden

.left {
   	      float: left;	      width: 200px;	      height: 200px;	      background-color: aquamarine;	    }    .right {
   	      overflow:hidden;	      height: 200px;	      background-color: antiquewhite;    }

ps：浮动定位注意父标签要清除浮动。

3. 绝对定位

• 左边方框绝对定位

.con {
   	      position: relative;   		 }	 .left {
   	      position: absolute;	      top: 0;	      left: 0;	      width: 200px;	      height: 200px;	      background-color: aquamarine;	    }    .right {
   	      height: 200px;	      background-color: antiquewhite;    }

• 右边方框绝对定位

.con {
   	      position: relative;   		 }	 .left {
   	      width: 200px;	      height: 200px;	      background-color: aquamarine;	    }    .right {
       	  position: absolute;	      top: 0;	      right: 0;	      height: 200px;	      background-color: antiquewhite;    }

4. 弹性布局

.con {
   	     display: flex;   		 }	 .left {
   	      width: 200px;	      height: 200px;	      background-color: aquamarine;	    }    .right {
       	  flex: 1;	      height: 200px;	      background-color: antiquewhite;    }

5. table-cell伪表格布局

.con {
   	     display: table;   		 }	 .left {
   	 	  display: table-cell;	      width: 200px;	      height: 200px;	      background-color: aquamarine;	    }    .right {
       	  display: table-cell;	      height: 200px;	      background-color: antiquewhite;    }

6. inline-block

.left {
   	 	  display: inline-block;	      width: 200px;	      height: 200px;	      background-color: aquamarine;	    }    .right {
       	  display: inline-block;    	  width:200px;	      height: 200px;	      background-color: antiquewhite;    }

ps：这种布局两个盒子之间会有空隙，注意清除空隙。

转载地址：http://kchwi.baihongyu.com/