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

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 容器。

希望这就是你要找的东西！