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

时间:2016-10-16 13:00:54

标签: html css grid alignment photos

我要做的是将三个图像(这一个:http://baseframe.co/a/img/animus.png)放在一个有两层的三列网格系统中。

我真的很难把div放在一起,所以如果有人能解释我遇到的问题,那真的很有帮助!

谢谢, 亚伦

编辑:

这是我的代码:

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

1 个答案:

答案 0 :(得分:0)

您可能想要使用std::getline()。所以......

display: inline-block

每个<div> <img src="..."> </div> <div> <img src="..."> </div> <div> <img src="..."> </div> <div>的样式......

<img ...>

这是一种非常简单的方法,因为您可能希望应用一些其他样式。将每个div { display: inline-block; } img { width: 100%; } 的宽度限制为33%,以连续获得三个相同大小的图像。然后重复HTML,这样就可以在新行上打破下三个图像。对每个<div>应用100%的宽度将确保它们不会从各自的<img ...>容器中溢出。

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