我想为一个投资组合创建一个布局。在大屏幕上，它有三列，包含均匀间隔的图像。这是我的意思的一个例子：
http://www.yourinspirationweb.com/wp-content/uploads/2012/09/portfolio-3-colonne.png
我在这里创建了一个粗略的jsfiddle：http://jsfiddle.net/3h2fm6pb/1/
这是html：
<div id="container">
<div class="imgContainer">
<div class="image">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg">
</div>
<div class="image">
<img src="https://photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
</div>
<div class="image">
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg">
</div>
<div class="image">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg">
</div>
<div class="image">
<img src="https://photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg">
</div>
<div class="image">
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg">
</div>
</div>
</div>
这是scss：
#container {
max-width: 600px;
margin: 0 auto;
.imgContainer{
width: 100%;
}
}
.image {
float: left;
width: 33%;
img {
width: 100%;
display: block;
}
}
我正在努力在图像之间获得空白区域，这样无论图像在哪里，它们总是看起来均匀分布。
将padding: 5px;添加到.image类不起作用，因此只有两个图像可以放入行中。这是为什么？
据我所知，这个jsfiddle目前在调整视口大小时缩小整个容器，但是我将实现媒体查询，以便图像在较小的视口上达到50％等等。 ，两个图像将在行而不是三个。
因此，考虑到这一点，创建此布局的最有效方法是什么，这样无论视口大小如何，图像之间都有均匀的填充。到目前为止我尝试过的效果不是很好....它在一个屏幕尺寸上看起来不错，但是当它们重新安排另一个视口大小时，白色空间看起来不均匀。
以下是我对视口大小的含义细分：
大屏幕：每行三张图片......中间和侧面图像之间有间隙......每行之间有间隙。这些差距是相同的。
屏幕较小：每行两张图片......两张图片之间有间隙......每行之间有间隙
移动屏幕：每行一个图像....每个图像下方和上方只有一个间隙
希望这是有道理的。
提前致谢。