图片库只有一个 div 元素作为行，并以新行显示图像答案

【问题标题】：Image gallery with only one div elemement as row, and displaying the images in new lines图片库只有一个 div 元素作为行，并以新行显示图像
【发布时间】：2020-09-26 19:02:00
【问题描述】：

我正在学习 Scss，并尝试使用 SASS 创建一个图片库。

我试图为整个图片库仅包含一个 div 标签作为行，我不想为每一行添加一个新的 div。

这样行吗，只取一个 div 作为行，并创建带有样式的行。

我需要建议。

`<div class="image-gallery-items">
          <div class="image-gallery-item">
              <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
        </div>`

使用此代码，它可以在一行中显示所有图像。

【问题讨论】：

嗨，欢迎来到 Stack Overflow！你能举一个最小的可重现的例子吗？这样社区就可以检查工作代码。最好只放置必要的代码，以防止过多的噪音。欲了解更多信息：stackoverflow.com/help/minimal-reproducible-example
当然。我会做的。

标签： html css sass flexbox css-selectors

【解决方案1】：

您可以使用 flexbox 实现这一点！ Flexbox 允许您包装超出父容器宽度的元素。我在下面包含了一个实际换行的示例。

我所做的是添加“display: flex;”和“弹性包装：包装；”到父元素（.image-gallery-items）。这使得子元素将按行显示，然后如果超出父元素宽度，则会自动溢出/换行到下一行。

.image-gallery-items {
  display: flex;
  flex-wrap: wrap;
  background: #ccc;
  width: 600px;
}

.image-gallery-item img {
  width: 190px;
  height: auto;
  padding: 5px;
}

<div class="image-gallery-items">
          <div class="image-gallery-item">
              <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          <div class="image-gallery-item">
            <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
        </div>`

【讨论】：

很高兴为您提供帮助！快乐编码（=