我可以通过哪些方式将图像以类似网格的格式放置? [英] What ways can I put images in a grid-like format?

问题描述

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

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

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

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

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

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

等等……

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

解决方案

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{向左飘浮;}

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

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-----] --- Row 1

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

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

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

and so on...

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屋！