如何使用 html 和 css 创建 3 列图像网格？ [关闭]答案

【问题标题】：How to create a 3 column image grid using html and css? [closed]如何使用 html 和 css 创建 3 列图像网格？ [关闭]
【发布时间】：2017-03-13 14:20:30
【问题描述】：

我很想知道创建类似于使用 HTML 和 CSS 附加的图像的图像网格的最佳做法是什么。

谢谢。

【问题讨论】：

CSS 列、内联块、浮动块、表格、弹性框...

标签： html css grid image-gallery

【解决方案1】：

你会像这样使用 CSS flex 容器。

这是示例 CSS：

.flex-container {
  flex-direction:row;
  display: -webkit-flex;
  display: flex;
  background-color: grey;
  width: 100%;
  height: 100px;
  align-content: center;
  flex-flow: row wrap; 
}

.flex-item {
  background-color: lightblue;
  width: 40%;
  height: 100px;
  margin: 10px;
  order: 1;  
}

下面是示例 HTML：

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
  <div class="flex-item">flex item 4</div> 
</div>

您将需要采用这种技术并将其应用到您的环境中。

【讨论】：

感谢您的回答。我设法创建了网格视图，但似乎无法对齐项目中心。 imgur.com/j4Hrkf7
将您的代码作为新问题发布，以便社区查看。我相信我们可以为您解决。
谢谢。我在这里发布了一个问题：stackoverflow.com/questions/42093444/…
.flex-container div 的高度是否必须为 100 像素？我测试了代码，它似乎打破了这个例子。我想如果你去掉那条线，它看起来会更像图片。