我可以把图像以网格格式的什么方式？ [英] What ways can I put images in a grid-like format?

问题描述

我有大约12-15张图片，我想在网格中对齐，每个图片下面有文字。我想到使用表，但我听说，表不是最好的方式去这些天。
我尝试了一些其他的东西，但没有什么似乎工作的方式，我想要的。

I have about 12-15 images that I want to align together in a grid, with text under each image. I thought about using a table, but I hear that tables aren't the best way to go these days. I tried a few other things, but nothing seemed to work the way I wanted it to.

一个例子，我想让它看起来像像这样：

An example of what I want it to look like would be something like this:

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

[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] --- Row 1

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

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

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

[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] --- Row 2

--Description-）（-Description-）（-Description-）（-Description - ）

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

等等...

除了表，还有其他一些方法，我应该考虑使用？
任何建议或参考都是有帮助的。

What are some other methods, besides tables, that I should look into using? Any suggestions or references would be helpful.

推荐答案

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;
}

你可能需要一些更多的风格，但基本上你应该做的。

You'll probably want some more styles, but that should do basically what you want.

这篇关于我可以把图像以网格格式的什么方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！