适应性地将多个图像适合容器

Question

我知道有很多帖子都有类似的问题，但在阅读之后，我无法解决我的问题。我想要一个独特的CSS解决方案。

这是我的代码：

    #infobox {
        margin-left: 15%;
        margin-right: 15%;
        width: 70%;
        .pics {
            opacity: 0.5;
            float: left;
            width: 100%;
        }
    }

但是，使用此代码，我连续三张图片，第四张图片在这些图片下面。我怎样才能调整这些图像的大小以便将它们保持在一排呢？

Answer 1

如果您确定每行只有4张照片，可以使用：

#infobox {
    margin-left: 15%;
    margin-right: 15%;
    width: 70%;

}
#infobox .pics {
    opacity: 0.5;
    float: left;
    width: 25%;
}