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，这样我就必须垂直滚动，我无法理解如何纠正这个问题。

提前致谢。

Answer 1

要执行此操作，您需要创建父容器，然后为其分配overflow-x: scroll css规则。您还需要为display: inline-block课程分配parent规则。您还需要应用空格：nowrap;。

DEMO 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>

水平显示父div在页面宽度之外

1 个答案: