布局二

CSS 常见布局之多列布局

左列定宽，右列自适应

该布局什么常见，适用于定宽的一侧常为导航，自适应的一侧为内容布局

• 利用 float + margin　实现

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

• 利用 float + margin(fix) 实现

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

• 使用 float + overflow 实现

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

• 使用 table 实现

  .parent{display:table;table-layout:fixed;width:100%;} 
  .left{width:100px;} 
  .right,.left{display:table-cell;}
  

• 利用 flex 实现

  .parent{display:flex;} 
  .left,.center{width:100px;} 
  .right{flex:1}
  

右列定宽，左列自适应

• 使用 float + margin 实现

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

• 使用 table 实现

  .parent{display:table; table-layout:fixed; width:100%;}
  .left{display:table-cell;}
  .right{width:100px; display:table-cell;}

• 使用 flex 实现

  .parent{display:flex;} 
  .left{flex:1;} 
  .right{width:100px;}
  

两列定宽，一列自适应

• 利用 float + margin 实现

  .left,.center{float:left:width:200px;} 
  .right{margin-left:400px;}
  

• 利用 float + overflow 实现

  .left,.center{float:left:width:200px;} 
  .right{overflow:hidden;}
  

• 利用 table 实现

  .parent{display:table;table-layout:fixed;width:100%;} 
  .left,.center,.right{display:table-cell;} 
  .left,.center{width:200px;}
  

• 利用 flex 实现

  .parent{display:flex;} 
  .left,.center{width:100px;} 
  .right{flex:1}
  

多列等分布局

• 使用 float 实现

  .parent{margin-left:-20px}/*假设列之间的间距为20px*/ 
  .column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}
  

• 利用 table 实现

  .parent-fix{margin-left:-20px;} 
  .parent{display:table;table-layout:fixed;width:100%;} 
  .column{display:table-cell;padding-left:20px;}
  

• 利用 flex 实现

  .parent{display:flex;} 
  .column{flex:1;} 
  .column+.column{margin-left:20px;}