多行而不是一行的图像

Question

我的问题Want the remaining photos in the second row.

**示例图片的链接**

我在处理 div "small-img-row" 中的一行溢出图像时遇到问题。

small-img-row 位于 col-2 下方，即主图像。

我的问题是如何使溢出图像位于第二行。

如this is what I want （我还在学习html和css）

<div class="small-container">

<div class="col-2">
    <img src="src/0File .JPG" alt="" width="800%" id="product-img">
    <div class="small-img-row">
        <div class="small-img-col"><img src="src/0File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/1File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/2File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/3File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/4File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/5File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/6File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/7File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/8File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/9File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/10File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/11File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/12File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/13File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/14File .JPG" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="src/15File .JPG" alt="" width="100%" class="small-img"></div>
    </div>
</div>

<div class="single-product-page-text">
</div>

.small-img-row {
    display: flex;
    justify-content: space-between;
    height: auto;
}
div.discription-txt {
    font-size: 15px;
    color: white;
}
.col-2 img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
}
.col-2 {
    max-width: 100%;
}
.small-img-row img {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
/* the sub image size  */
.small-img-col img {
    min-width: 120px;
    width: 20%;
    size: 100%;
    padding: 6px;
}
.small-container {
    padding: 1%;
    display: flex;
    justify-content: center;
    justify-items: center;
}

Answer 1

flex-wrap: wrap 是解决方案。我已经相应地调整了 CSS 的其余部分。

请参考下面的代码sn-p。

.col-2 {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}

.col-2>img{
  max-width: 70%;
  margin: auto;
  padding: 16px;
}

.small-img-row img{
  max-width: 150px;
  margin-right: 16px;
}

.small-img-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-right: -16px;
}

<div class="small-container">

<div class="col-2">
    <img src="https://picsum.photos/id/100/500/300" alt="" width="800%" id="product-img">
    <div class="small-img-row">
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
        <div class="small-img-col"><img src="https://picsum.photos/id/100/500/300" alt="" width="100%" class="small-img"></div>
    </div>
</div>

<div class="single-product-page-text">
</div>

Answer 2

编辑 1：

Codepen 链接： https://codepen.io/prathameshkoshti/pen/dyXQoRd?editors=1100

我在您的代码中进行了一些更改，例如将图像标签的最大宽度修改为 120 像素，因此不会超过该值（不删除周围的 div）

---

你需要添加

.small-img-row {
  .
  .
  flex-wrap: wrap;
}

这样较小的图像将被换行到下一行。

同时删除选择器.small-img-row img 的弹性设置/属性 它应该存在于作为实际弹性容器的父级。 永远记住，flex 应该应用于父元素而不是子元素。在您的情况下，.small-img-row 是您的父元素。