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

Creating a fluid 3 column layout for images to be displayed

提问by Forrest

I'm wanting to create a layout for a portfolio. On large screens, it has three columns, containing images evenly spaced out. Here is an example of what I mean:

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

http://www.yourinspirationweb.com/wp-content/uploads/2012/09/portfolio-3-colonne.png

http://www.yourinspirationweb.com/wp-content/uploads/2012/09/portfolio-3-colonne.png

I have created a rough jsfiddle here: http://jsfiddle.net/3h2fm6pb/1/

我在这里创建了一个粗略的 jsfiddle：http: //jsfiddle.net/3h2fm6pb/1/

Here is the html:

这是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>

Here is the scss:

这是scss：

#container {
    max-width: 600px;
    margin: 0 auto;

    .imgContainer{
        width: 100%;
    }

}

.image {
    float: left;
    width: 33%;
    img {
        width: 100%;
        display: block;
    }
}

I'm struggling getting white space in between the images, so that no matter where the images are, they always look evenly spaced out.

我正在努力在图像之间获得空白，因此无论图像在哪里，它们总是看起来均匀分布。

Adding padding: 5px;to the .imageclass, doesn't work as it makes it so only two images can fit in the row. Why is this?

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

I understand that this jsfiddle, at the moment scales down the entire container when the viewport is resized, however I'm going to implement media queries so that the images go up to 50% size etc.. on smaller viewports and therefore, two images would be on the row instead of three.

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

So, with this in mind, what would be the most effective way to create this layout, so that the images have nice even padding between them, no matter what the viewport size is. What I've tried so far doesn't work very well....it can look good on one screen size, but when they re-arrange for another viewport size, the white space looks uneven.

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

Here is a breakdown of what I mean with the viewport sizes:

以下是我对视口大小的含义的细分：

Large screens: three images on each row...there is a gap between the center and side images...there is a gap between each row. These gaps are the same amount.

大屏幕：每行三幅图像……中间图像和侧面图像之间存在间隙……每行之间存在间隙。这些差距是相同的数量。

Smaller screens: two images on each row...there is a gap between the two images...there is a gap between each row

较小的屏幕：每行两幅图像……两幅图像之间有间隙……每行之间都有间隙

mobile screens: one image per row....there is only a gap below and above each image

移动屏幕：每行一张图片......每张图片下方和上方只有一个间隙

Hope this makes sense.

希望这是有道理的。

Thanks in advance.

提前致谢。

回答by sgromskiy

You need set box-sizingto border-boxto use paddingwith width. Here is full example

你需要设置box-sizing来border-box使用padding与width。这是完整的例子