Html 有哪些方法可以将图像置于类似网格的格式中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2562737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What ways can I put images in a grid-like format?
提问by Peter
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.
我有大约 12-15 张图像要在网格中对齐，每个图像下都有文字。我想过使用桌子，但我听说现在桌子不是最好的方式。我尝试了其他一些事情，但似乎没有任何事情像我想要的那样工作。
An example of what I want it to look like would be something like this:
我希望它看起来像的一个例子是这样的：
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] --- Row 1
[-----图片-----] [-----图片-----] [-----图片-----] [-----图片---- -] --- 第 1 行
(--Description-) (-Description-) (-Description-) (-Description-)
(--Description-) (-Description-) (-Description-) (-Description-)
[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] --- Row 2
[-----图片-----] [-----图片-----] [-----图片-----] [-----图片---- -] --- 第 2 行
(--Description-) (-Description-) (-Description-) (-Description-)
(--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.
除了表格之外，我还应该考虑使用哪些其他方法？任何建议或参考都会有所帮助。
采纳答案by crimson_penguin
HTML:
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:
CSS：
.floated_img
{
float: left;
}
You'll probably want some more styles, but that should do basically what you want.
您可能需要更多样式，但这基本上应该满足您的需求。
回答by Eric Petroelje
A grid like format? sounds like a table to me. There's nothing wrong with tables if you are using them for something that actually is a table.
类似网格的格式？对我来说听起来像一张桌子。如果您将它们用于实际上是一张桌子的东西，那么桌子并没有错。
回答by The Who
Since you said grid that means that the height and width will be fixed.
既然你说网格意味着高度和宽度将是固定的。
An inline-block might work very well for you. I find they are a little easier to work with than floats. And, inline-blocks respect the inherited align property(so you could have them centered)
内联块可能非常适合您。我发现它们比浮动更容易使用。并且，内联块尊重继承的 align 属性（因此您可以将它们居中）
CSS
CSS
.grid_element {
display: inline-block;
width: 200px;
height:200px;
zoom: 1; /* for IE */
display*:inline; /* for IE */
}
However, inline-block elements might not work so well on older browsers.
但是，内联块元素在较旧的浏览器上可能无法很好地工作。
Some Reading:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html
一些阅读：
http: //foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html
