html - Bootstrap镜像散布于此站点

我正在尝试制作一个页面，其中包含一个类似于此站点的图像列表：

http://www.journaldemontreal.com

有人可以建议什么吗？

最佳答案

我是Google搜索的忠实粉丝，因为使用正确的关键字，您可以获得预期的输出。
查看此链接：https://codepen.io/ckschmieder/pen/KVaZMW/

body { margin: 0; background: #333; }

.gallery {
  max-width: 900px;
  padding: .5vw;
  font-size: 0;
  border: 2px solid whitesmoke;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: flex;
  margin: 0 auto;
}
.gallery div {
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto;
  width: 200px;
  margin: .5vw;
}
.gallery div img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 400px) {
  .gallery div { margin: 0; }
  .gallery { padding: 0; }

}

<section id="main">
  <div class="gallery">
    <div><img src="https://unsplash.it/600/400?image=580"></div>
    <div><img src="https://unsplash.it/500/340?image=870"></div>
    <div><img src="https://unsplash.it/520/400?image=767"></div>
    <div><img src="https://unsplash.it/650/400?image=296"></div>
    <div><img src="https://unsplash.it/620/410?image=168"></div>
    <div><img src="https://unsplash.it/600/450?image=871"></div>
    <div><img src="https://unsplash.it/355/400?image=826"></div>
    <div><img src="https://unsplash.it/620/410?image=168"></div>
    <div><img src="https://unsplash.it/600/450?image=871"></div>
    <div><img src="https://unsplash.it/355/400?image=826"></div>
  </div>
</section>

仅供参考：我没有写这封信，但无论写了什么，都应归功于他们。

在这里看起来不太好，但是您应该在Codepen上进行检查

关于html - Bootstrap镜像散布于此站点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51111182/