为要显示的图像创建流体3列布局

Question

我想为投资组合创建布局。在大屏幕上，它有三列，包含均匀分布的图像。这里是我的意思的例子：

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; 
    } 
} 

我挣扎得到空白我n之间的图像，所以无论图像在哪里，他们总是看起来均匀间隔。

将padding: 5px;添加到.image类，不起作用，因为它使它只有两个图像可以放入该行。为什么是这样？

我知道这个jsfiddle在调整视口尺寸时缩小了整个容器，但是我要实现媒体查询，以便图像的尺寸达到50％等等。因此，两个图像将在行而不是三个。

因此，考虑到这一点，创建此布局的最有效方法是什么，以便图像在它们之间具有很好的填充效果，无论视口大小如何。到目前为止，我尝试过的方法效果不佳......在一个屏幕尺寸上它看起来不错，但是当它们重新安排另一个视口尺寸时，空白看起来不均匀。

这里是什么，我与视尺寸意味着故障：

大屏幕：每行三个图像...有中央和侧面图像之间的差距......之间有差距每一行。这些差距是相同的数额。

较小的屏幕：在每一行上的两个图像...有两个图像之间的间隙...有

移动屏幕的每一行之间的间隙：每行一个图像....有只有每个图像的下方和上方有间隙

希望这是有道理的。

在此先感谢。

Answer 1

您需要将box-sizing设置为border-box才能使用padding与width。这里已满example