float + 两层DOM实现

 

html

 

<div class="container">

 

 <div class="div1 clearfix">

 

   <div>1</div>

 

   <div>2</div>

 

   <div>3</div>

 

 </div>

 

 </div>

 

css

 

 .container {

 

 width: 200px;

 

 overflow: hidden; 

 

 }

 

 /* float:left */

 

 .div1 {

 

   overflow: hidden;

 

   width: 700px;

 

 }

 

 .div1 > div {

 

   width: 200px;

 

   float:left;

 

   margin-left: 10px;

 

   background: green;

 

   border:1px solid red;

 

 }

 

display:inline-block + 两层DOM 实现

 

  <div class="container">

 

   <div class="div2">

 

     <div>1</div>

 

     <div>2</div>

 

     <div>3</div>

 

   </div>

 

 </div>

 

css

 

 /* display: inline-block */

 

 .div2 {

 

   overflow: hidden;

 

   width: 700px;

 

 }

 

 .div2 > div {

 

   width: 200px;

 

   display: inline-block;

 

   border: 1px solid green;

 

 }

 

white-sapce:nowrap减少一层DOM

 

html

 

<div class="div3">

 

  <div>1</div>

 

  <div>2</div>

 

  <div>3</div>

 

  </div>

 

css

 

     /* white-sapce: nowrap 能减少一层DOM*/

 

  .div3 {

 

    white-space: nowrap;

 

    overflow: hidden;

 

  }

 

  .div3 > div {

 

    width: 200px;

 

    display: inline-block;

 

    border: 1px solid blue;

 

  }