html - 为要显示的图像创建一个流畅的 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;
    }
}

我正在努力在图像之间留出空白，以便无论图像在哪里，它们看起来总是均匀分布。

将 padding: 5px; 添加到 .image 类中不起作用，因为它使得行中只能容纳两个图像。这是为什么？

我知道这个 jsfiddle 目前会在调整视口(viewport)大小时缩小整个容器，但是我将实现媒体查询，以便图像在较小的视口(viewport)上达到 50% 大小等，因此，两张图片将排在同一行，而不是三张。

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

以下是我对视口(viewport)大小的理解:

大屏幕:每行三个图像...中间图像和侧面图像之间有间隙...每行之间有间隙。这些差距是相同的。

较小的屏幕:每行两张图片......两张图片之间有一个空隙......每行之间有一个空隙

移动屏幕:每行一张图片....每张图片上下只有一个空隙

希望这是有道理的。

提前致谢。

Answer 1

您需要将 box-sizing 设置为 border-box 以使用 padding 和 width。这里满example