爲要顯示的圖像創建流體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