php - 水平显示超出页面宽度的父div

Question

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

子类的高度为20%，宽度为200px。

我想知道的是，当我有 20 个父 div 时，我想知道如何设置它，以便它们全部水平显示，超出页面宽度，这样我就必须滚动向左或向右查看数据。目前，它填满了页面的宽度，并在第一个父 div 的下方开始了下一个父 div，因此我必须垂直滚动，而且我不知道如何解决这个问题。

提前致谢。

Answer 1

为此，您需要创建一个父容器，然后为其分配一个 overflow-x: scroll css 规则。您还需要将 display: inline-block 规则分配给您的 parent 类。您还需要应用 white-space: nowrap;。

演示 http://jsfiddle.net/qujyunn4/

.wrapper {
    overflow-x: scroll;
    white-space: nowrap;
}
.parent {
    display: inline-block;
    width: 200px;
    height: 300px;
    border: red solid thin;
    margin-right: 5px;
    white-space: nowrap;
}

<div class="wrapper">
    <div class="parent">
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
    </div>
    <div class="parent">
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
    </div>
    <div class="parent">
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
    </div>
    <div class="parent">
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
      <div class="child">
      </div>
    </div>
</div>