横向滚动布局 white-space:nowrap

  1. 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;
     }
    
  2. 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;
     }
    
  3. 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;
      }
上一篇:LeetCode-sort-colors


下一篇:【转】php结合redis实现高并发下的抢购、秒杀功能