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

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

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