横向滚动布局 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;
    }
上一篇:c#基础小练习


下一篇:启动storm集群及配置