横向滚动布局 white-space:nowrap

Posted 2021-11-07 rosendolu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了横向滚动布局 white-space:nowrap相关的知识，希望对你有一定的参考价值。

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

以上是关于横向滚动布局 white-space:nowrap的主要内容，如果未能解决你的问题，请参考以下文章