问题我可以用什么方法将图像放入网格状格式？

我有大约12-15个图像，我想在网格中对齐，每个图像下都有文本。我想过使用一张桌子，但我听说这些桌子不是最好的方式。我尝试了其他一些东西，但似乎没有任何东西像我想要的那样工作。

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

[----- Image -----] [----- Image -----] [----- Image -----] [----- Image ---- - ] ---第1行

（ - 描述 - ）（ - 描述 - ）（ - 描述 - ）（ - 描述 - ）

[----- Image -----] [----- Image -----] [----- Image -----] [----- Image ---- - ] ---第2行

（ - 描述 - ）（ - 描述 - ）（ - 描述 - ）（ - 描述 - ）

等等...

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

3072

2018-04-01 18:36

起源

你用的是什么语言？ - Seth Moore

这是HTML吗？图像是动态加载的吗？你能告诉我们更多信息吗？ - Ascalonian

crimson_penguin给了我我所需要的东西。我只是想避免使用表格，并且通过为每张图片使用div，我能够完全避免使用表格。但是，为了回答你的问题，我正在寻找一个解决问题的方法。 - Peter

答案:

HTML：

<div class =“floated_img”>
    <img src =“img.jpg”alt =“某些图片”>
    <p>上图的描述</ p>
</ DIV>
<div class =“floated_img”>
    <img src =“img2.jpg”alt =“另一张图片”>
    <p>上图的描述</ p>
</ DIV>

CSS：

.floated_img
{
    向左飘浮;
}

你可能想要更多款式，但这基本上应该是你想要的。

2018-04-01 18:43

很简单！真棒。我在这里应用了这个： nancyboszhardtinc.com/press （稍微搞乱了一些Wordpress画廊。） - ATSiem

网格状格式？听起来像是一张桌子给我。如果您将表用于实际上是表格的表格，则表格没有任何问题。

2018-04-01 18:41

网格！=一张桌子。一列中的照片是否具有某种逻辑关联？如果答案为是，请使用表格。如果答案为否则它只是一个网格，应该使用CSS完成。 - Diodeus - James MacFarlane

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

内联块可能对您有用。我发现他们比漂浮物更容易使用。并且，内联块尊重继承的对齐属性（因此您可以将它们居中）

CSS

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

但是，内联块元素在旧版浏览器上可能无法正常工作。

一些阅读：
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html

2018-04-01 18:56

问题 我可以用什么方法将图像放入网格状格式？

答案:

热门问题

问题我可以用什么方法将图像放入网格状格式？