Question

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

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

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

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

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

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

依旧......

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

Answer 1

HTML：

<div class="floated_img">
    <img src="img.jpg" alt="Some image">
    <p>Description of above image</p>
</div>
<div class="floated_img">
    <img src="img2.jpg" alt="Another image">
    <p>Description of above image</p>
</div>

CSS：

.floated_img
{
    float: left;
}

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

Answer 2

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

Answer 3

因为您说网格意味着高度和宽度将被修复。

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

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

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

3 个答案: