html - 如何使用wrap和inline-block使javascript卡溢出

我正在尝试使一堆div内联排列并在它们离开屏幕时滚动。

这就是我所拥有的。很抱歉，没有为card div设置格式。

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.card {
    display: inline-block;
 }

<div class="scrolling-wrapper">
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
</div>

当内容适合card div时，它可以正常工作。但是由于white-space: nowrap，当它们不合适时，卡外会溢出。但是，如果我将空白属性更改为white-space: initial/normal或其他任何内容，就解决了溢出问题，但是卡不再滚动并环绕到下一行：

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: initial;
}
.card {
  display: inline-block;
}

<div class="scrolling-wrapper">
  <div class="card"><h2>Card content content content content Card content content content content Card content content content content Card content content content content Card content content content content </h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
</div>

我想也许display: inline-block和white-space:nowrap是冲突的，但我不知道这是不是真的。谢谢你的帮助！

Code credits

最佳答案

尝试使用以下代码段，并确认是否正是您想要的。

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
  max-width: 200px;
  white-space: initial;
}

<div class="scrolling-wrapper">
  <div class="card">
    <h2>Card content content content content Card content content content content Card content content content content Card content content content content Card content content content content</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
</div>

关于html - 如何使用wrap和inline-block使javascript卡溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51779031/