javascript - 如何让图像在一行中一直贯穿整个屏幕

Question

嗨，我遇到了一个问题，我有一个 div 中的图像列表，该 div 位于另一个具有流媒体类的 div 中。我希望图像并排排成一行，并且我希望具有流媒体类的 div 在 div 底部有一个滚动条，因此当我滚动时，我看到的图像是我想要水平滚动而不是垂直滚动的垂直滚动条不显示。但我遇到了问题，这个问题真的很考验我的耐心。我尝试在类流式传输的 div 一侧的 div 上执行 float:left 操作，但它只是在到达页面边缘时将它们堆叠起来，如果添加更多元素，我还需要它进行调整。谢谢您

HTML:

<div class="streaming">
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
    <div><img src="../img/ben.png" alt="" height="60"></div>
</div>

CSS:

.streaming div {
    display: table;
    float: left;
    padding: 5px;
}

.streaming {
    overflow-y:hidden;
    overflow-x: scroll;
    width: 100%;
}

Answer 1

我会使用 flex 来完成此操作，默认的 flex row 将会以这种方式运行。

.streaming div {
  padding: 5px;
}

.streaming {
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
}

<div class="streaming">
    <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div><div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div><div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
  <div><img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="" height="60"></div>
</div>