css多列布局解决方案

利用css解决多列布局布局到处可见，下面总结了自适应、等高布局、等宽布局常见的解决方案。

自适应解决方案

• 定宽+自适应：float+margin

     		.p{background:#666}
     		.right p{background:#999}
     		.left{width:100px;float:left}
     		.right{margin-left:120px}
     		<div class="parent">
     			<div class="left">
         			<p>left</p>
     			</div>
     			<div class="right">
         			<p>right</p>
         			<p>right</p>
     			</div>
     		</div>
  

• 定宽+自适应：float+overflow

  	.p{background:#666}
  	.right p{background:#999}
  	.left{width:100px;float:left;margin-right:20px}
  	.right{overflow:hidden}
  	<div class="parent">
      	<div class="left">
          	<p>left</p>
      	</div>
      	<div class="right">
          	<p>right</p>
          	<p>right</p>
      	</div>
  	</div>
  

• 定宽+自适应：table
  利用table的天然特性

  	.p{background:#666}
  	.right p{background:#999}
  	.parent{
  			display:table;
  			width:100%;
  			table-layout:fixed;
  	}
  	.left,.right{display:table-cell}
  	.left{width:100px;padd-right:20px}
  	<div class="parent">
      	<div class="left">
          	<p>left</p>
      	</div>
      	<div class="right">
          	<p>right</p>
          	<p>right</p>
      	</div>
  	</div>
  

• 定宽+自适应：flex
  css3中的flex有强大布局功能

  	.parent{display:flex}
  	.left{width:100px;margin-right:20px;}
  	.right{flex:1}
  	<div class="parent">
      	<div class=" left">
          	<p>left</p>
      	</div>
      	<div class="right">
          	<p>right</p>
          	<p>right</p>
      	</div>
  	</div>
  

  如下是不定宽+自适应
  

• 不定宽+自适应：float+overflow

  .left{float:left;margin-right:20px}
  .right{overflow:hidden}
  <div class="parent">
      <div class=" left">
          <p>left</p>
      </div>
      <div class="right">
          <p>right</p>
          <p>right</p>
      </div>
  </div>
  

  利用overflow+float的方式也可以实现自适应+不定宽，不定宽部分也可以在left类下面的元素设置宽度，这种方法组合既可以实现不定宽+自适应，也可以实现定宽+自适应，非常好用。

• 不定宽+自适应：table

  .parent{display:table,table-layout:auto;width:100%}
  .left,.right{display:table-cell}
  .left{width:0.1%;padding-right:20px}
  <div class="parent">
      <div class=" left">
          <p>left</p>
      </div>
      <div class="right">
          <p>right</p>
          <p>right</p>
      </div>
  </div>
  

  table天然的特性是自适应，其中table-layout是核心。

• 不定宽+自适应：flex

  .parent{display:flex}
  .left{margin-right:20px}
  .right{flex:1}
  <div class="parent">
      <div class=" left">
          <p>left</p>
      </div>
      <div class="right">
          <p>right</p>
          <p>right</p>
      </div>
  </div>
  

等宽布局

• 多列等宽：float

  .parent{magin-left:-20px}
  .col{float：left;width:25%;padding-left:20px;border-box:box-sizing}
  <div class="parent">
          <div class="col">
              <p>1</p>
          </div>
          <div class="col">
              <p>1</p>
          </div>
          <div class="col">
              <p>1</p>
          </div>
          <div class="col">
              <p>1</p>
          </div>
      </div>
  

  float等宽布局缺点是要知道有多少列，如4列，width就是25%。
• 多列等宽：table

  .parent-fix{margin-left:-20px;}
  .parent{width:100%;display:table}
  .col{padding-left:20px}
  <div>
      <div class="parent-fix">
          <div class="parent">
              <div class="col">
                  <p>1</p>
              </div>
              <div class="col">
                  <p>11</p>
              </div>
              <div class="col">
                  <p>111</p>
              </div>
              <div class="col">
                  <p>1111</p>
              </div>
          </div>
      </div>
  </div>
  

• 多列等宽：flex

  .parent{display:flex}
  .col{flex:1}
  .col+.col{margin-left:20px}
  	<div>
          <div class="parent">
              <div class="col">
                  <p>1</p>
              </div>
              <div class="col">
                  <p>11</p>
              </div>
              <div class="col">
                  <p>111</p>
              </div>
              <div class="col">
                  <p>1111</p>
              </div>
          </div>
  	</div>
  

  多列布局中table和flex布局的方式显得就更加灵活，比float灵活，不必知道有多少列就可以等宽布局。

等高布局

• 等高布局：table

  .parent{display:table;width:100%;table-layout:fixed}
  .left{display:table-cell;border-right:20px solid transparent;background-clip:padding-box}
  .right{display:table-cell}
  <div class="parent"">
      <div class="left">
          <p style="background:transparent">left</p>
      </div>
      <div class="right">
          <p>rightright</p>
          <p>right</p>
      </div>
  </div>
  

• 等高布局：flex

  .parent{dispaly:flex;align-items: stretch;}
  .right.left{flex:1}
  <div class="parent"">
      <div class="left">
          <p>left</p>
      </div>
      <div class="right">
          <p>rightright</p>
          <p>right</p>
      </div>
  </div>
  

  章末总结：上述总结了常见的多列布局方式，其中多列定宽+自适应，多列不定宽+自适应方法跟上述方法类似。css3中flex布局非常常见，可以解决多数布局方式，值得推荐。