横向滚动布局 white-space:nowrap

标签：contain   containe   css   dom   oat   nta   border   htm   滚动   

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;
     }

横向滚动布局 white-space:nowrap

标签：contain   containe   css   dom   oat   nta   border   htm   滚动   

原文地址：https://www.cnblogs.com/rosendolu/p/10597318.html