有什么方法可以将图像以网格格式放置？答案

【问题标题】：What ways can I put images in a grid-like format?有什么方法可以将图像以网格格式放置？
【发布时间】：2016-09-06 09:58:43
【问题描述】：

我有大约 12 到 15 张图片要在一个网格中对齐，每张图片下都有文字。我考虑过使用一张桌子，但我听说现在桌子不是最好的选择。我尝试了其他一些方法，但似乎都没有达到我想要的效果。

我希望它看起来像这样的一个例子：

[-----图片-----] [-----图片-----] [-----图片-----] [-----图片- ----] --- 第 1 行

(--Description-) (-Description-) (-Description-) (-Description-)

[-----图片-----] [-----图片-----] [-----图片-----] [-----图片- ----] --- 第 2 行

(--Description-) (-Description-) (-Description-) (-Description-)

等等……

除了表格之外，我还应该考虑使用哪些其他方法？任何建议或参考都会有所帮助。

【问题讨论】：

这是针对 HTML 的吗？图片是动态加载的吗？您能给我们提供更多信息吗？
crimson_penguin 正是我所需要的。我只是想避免使用表格，并且通过为每张图片使用 div，我能够完全避免使用表格。不过，为了回答您的问题，我一直在寻找解决问题的 CSS 方法。

【解决方案1】：

HTML：

上图说明

CSS：

.floated_img { 向左飘浮; }

您可能需要更多样式，但这基本上应该满足您的需求。

【讨论】：

【解决方案2】：

既然你说网格，那就意味着高度和宽度是固定的。

内联块可能非常适合您。我发现它们比浮点数更容易使用。而且，内联块尊重继承的 align 属性（所以你可以让它们居中）

CSS

.grid_element {
  display: inline-block;
  width: 200px;
  height:200px;
  zoom: 1;         /* for IE */
  display*:inline; /* for IE */
}

但是，inline-block 元素在旧版浏览器上可能效果不佳。

【讨论】：