如何制作三图像网格系统？

Question

我想做的是将三张图片（这张：http://baseframe.co/a/img/animus.png）放在两层的三列网格系统中。

我真的很难将 div 并排放置，所以如果有人能解释一下我遇到的问题，那将非常有帮助！

谢谢，亚伦

编辑：

这是我的代码：

`http://codepen.io/aaronmtx/pen/PGdGyA`

Answer 1

您可能想使用 display: inline-block。所以...

<div>
    <img src="...">
</div>
<div>
    <img src="...">
</div>
<div>
    <img src="...">
</div>

每个 <div> 和 <img ...> 的样式...

div {
    display: inline-block;   
}

img {
    width: 100%;
}

这是一种非常简单的方法，因为您可能希望应用一些额外的样式。将每个 <div> 的宽度限制为 33% 以获得连续三个相同大小的图像。然后重复 HTML ，这样它将在新行上打破接下来的三个图像。对每个 <img ...> 应用 100% 的宽度将确保它们不会溢出各自的 div 容器。

希望这就是您要找的！

How to make a three image grid system?