只有一行分隔符的图像库，并以新行显示图像

Question

我正在学习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>`

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

Answer 1

您可以通过flexbox实现这一目标！ Flexbox允许您包装超出父容器宽度的元素。我在下面提供了一个包装示例。

我所做的是添加“ display：flex;”和“ flex-wrap：包装；”到父元素（.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>`