如何让我的媒体滚动条显示 3 个图像而不是 4 个？

Question

.dmiss {
  background-color: rgb(255, 255, 255);
  color: #d1d1d1;
  display: flex;
  overflow-x: auto;
  gap: 10px;
}


.dm1, .dm2, .dm3, .dm4, .dm5, .dm6, .dm7, .dm8, .dm9 {
  background-color: #ffffff;
  height: 450px;
  width: 450px;
  
}

.dmn11, .dmn22, .dmn33, .dmn44, .dmn55, .dmn66, .dmn77, .dmn88, .dmn99 {
  height: 450px;
  width: 450px;
  object-fit: cover;
}

<div class="dmiss">
          <div class="dm1">
            <img class="dmn11" src="images/dm1.jpg">
          </div>
          <div class="dm2">
            <img class="dmn22" src="images/dm2.jpg">
          </div>
          <div class="dm3">
            <img class="dmn33" src="images/dm3.jpg">
          </div>
            <div class="dm4">
              <img class="dmn44" src="images/dm4.jpg">
            </div>
              <div class="dm5">
                <img class="dmn55" src="images/dm5.jpg">
              </div>
                <div class="dm6">
                  <img class="dmn66" src="images/dm6.jpg">
                </div>
                  <div class="dm7">
                    <img class="dmn77" src="images/dm7.jpg">
                  </div>
                    <div class="dm8">
                      <img class="dmn88" src="images/dm8.jpg">
                    </div>
                      <div class="dm9">
                        <img class="dmn99" src="images/dm9.jpg">
                      </div>
        </div>

我想在我的媒体滚动条上显示 3 张图片，因此当我进一步滚动时，接下来的 3 张图片将会显示。下图没有完全显示，但我有 4 张图片 + 一些第 5 张图片。我试图将 dmiss 分成 3 个部分，但后来我没有将所有图像放在同一行中。

Answer 1

您可以使用 flex 属性将项目设置为 33.333333%，这样它们就分成三部分，我使用视口单位来调整它们的大小并同时使它们响应。我还大大减少了您的代码，因此您只有 3 类为您的整个画廊提供动力，这将使您在项目中进一步修改时更轻松。

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

.dmiss {
  background-color: rgb(255, 255, 255);
  color: #d1d1d1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100vw;
  height: 32vw;
  margin: 0;
}

.dmClass {
  flex: 0 0 33.333333%;
  background-color: #ffffff;
}

.dmImage {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0px 5px 5px 0px;
  object-fit: cover;
}

<div class="dmiss">
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/2Y9O8Cj.jpeg">
  </div>
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/Hrbzpp9.jpeg">
  </div>
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/k8RAh9t.jpeg">
  </div>
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/8jhZLa1.jpeg">
  </div>
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/vnF9qWG.jpeg">
  </div>
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/0pJ5mp7.jpeg">
  </div>
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/Ue9yjE2.jpeg">
  </div>
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/spIm9z9.jpeg">
  </div>
  <div class="dmClass">
    <img class="dmImage" src="https://i.imgur.com/fMHUT9v.jpeg">
  </div>
</div>

如何让我的媒体滚动条显示 3 个图像而不是 4 个？

How to make my media scroll bar display 3 images instead of 4?

html

css

flexbox