多列布局

定宽+自适应

float + margin

 <div class="parent">
     <div class="left">
        <p>left</p>
     </div>
     <div class="right">
        <p>right</p>
        <p>right</p>
     </div>
 </div>

   p {background-color: orange;}
  .right p {background-color: yellow;}
  .left { float: left; width: 100px; }
  .right {margin-left: 100px;}

float + overflow

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

table

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

flex

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

定宽+定宽+自适应

float + overflow

   <div class="parent">
     <div class="left">
        <p>left</p>
     </div>
    <div class="center">
       <p>center</p>
    </div>
     <div class="right">
        <p>right</p>
        <p>right</p>
     </div>
 </div>

 .left,.center {float: left; width: 100px; margin-right: 20px;}
 .right {overflow: hidden;}

不定宽 + 自适应

float + overflow

   <div class="parent">
     <div class="left">
        <p>left</p>
     </div>
     <div class="right">
        <p>right</p>
        <p>right</p>
     </div>
 </div>

    .left {float: left; margin-right: 20px;}
    .right {overflow: hidden;}

table

    .parent {display: table;width: 100%;}
    .left,.right {display: table-cell;}
    .left {width:0.1%; padding-right: 20px;}

flex

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

不定宽 + 不定宽 + 自适应

float + overflow

 <div class="parent">
     <div class="left">
        <p>left</p>
     </div>
    <div class="center">
       <p>center</p>
    </div>
     <div class="right">
        <p>right</p>
        <p>right</p>
     </div>
 </div>

  .left,center {float:left; margin-right: 20px;}
  .right {overflow: hidden;}

等宽

float

  <div class="parent">
       <div class="column"><p>1</p></div>
       <div class="column"><p>2</p></div>
       <div class="column"><p>3</p></div>
       <div class="column"><p>4</p></div>
  </div>

  .parent {margin-left: -20px;}
  .column {float: left; width: 25%; padding-left: 20px;box-sizing: border-box;}

table

  <div class="parent-fix">
       <div class="parent">
         <div class="column"><p>1</p></div>
         <div class="column"><p>2</p></div>
         <div class="column"><p>3</p></div>
         <div class="column"><p>4</p></div>
       </div>
  </div>

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

flex

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