Question

我正在尝试将图库中的嵌套图像设置为：

1）水平包裹拇指，即在本示例中，第一行上放一个和两个，然后在它们下面放上3和4，依此类推。

2）垂直包裹拇指，也要包裹拇指向上移动到顶部-并像第一列一样向下填充。

3）防止拇指增加画廊包装纸的高度，而要包装纸。我尝试将Gallerry设置为固定高度，但拇指仍然溢出。

<div id="list-wrapper">
  <div id="gallery">
    <div><img src="images/1.png" alt="one" /></div>
    <div><img src="images/2.png" alt="two" /></div>
    <div><img src="images/1.png" alt="three" /></div>              
    <div><img src="images/2.png" alt="four" /></div>
    <div><img src="images/1.png" alt="five" /></div>
    <div><img src="images/2.png" alt="six" /></div>
  </div>
  <div id="mainimg"><img src="images/lg.png" alt="large" /></div>
</div>


#list-wrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

#list-wrapper #gallery {
  flex: 1 1 20%;
  background-color:red;
  width:200px;
}
#list-wrapper #gallery div {
  width:100px;
  height:100px;
}
#list-wrapper #gallery div img {
  width:100px;
  height:100px;
}
#list-wrapper #mainimg {
  flex: 1 1 80%;
  background-color:blue;
}
#list-wrapper #mainimg img {
  width:100%;
  height:auto;
}

Flexbox Fiddle

匹配问题的示例：

1）水平：

2）垂直：

3）防止溢出：

Answer 1

像这样？ https://jsfiddle.net/xwkr3jgL/ 您可以轻松确定大小/边距/等。（以正确的比例和尺寸显示图像）使其更漂亮，但这就是您可以按照自己的意愿进行操作的方式=）

将道具flex-direction更改为row，

| 1 | 2 |
| 3 | 4 |
| 5 | 6 |

，并转到column：

| 1 | 4 |
| 2 | 5 |
| 3 | 6 |

#list-wrapper {
  width: 800px;
  display: grid;
  grid-template-columns: 20% 80%;
  border: 10px solid #000;
}

#gallery {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 420px;
}

#gallery > div {
  width: 50%;
}

#gallery img {
    max-width: 100%;
}

#mainimg > img {
  max-width: 100%;
  display: block;
}

<div id="list-wrapper">
  <div id="gallery">
        <div>
            <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="one" />
        </div>

        <div>
            <img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="two" />
        </div>

        <div>
            <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="three" />
        </div>              

        <div>
            <img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="four" />
        </div>

        <div>
            <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="five" />
        </div>

        <div>
            <img src="https://www.sideshowtoy.com/photo.php?sku=902537" alt="six" />
        </div>
        <div>
            <img src="https://pixel.nymag.com/imgs/daily/vulture/2016/12/15/15-star-wars-best-moments-2.w700.h700.jpg" alt="seven" />
        </div>
  </div>
  <div id="mainimg"><img src="https://shortlist.imgix.net/app/uploads/2015/12/04110243/50-of-the-best-star-wars-quotes-60-852x568.jpg?w=1200&h=1&fit=max&auto=format%2Ccompress" alt="large" /></div>

</div>

嵌套的Flexbox图片可以正确包装

1 个答案: