无论图像数量多少，图像都会自动填充容器div

Question

我想创建一个容器div并为其添加“X”个图像。但无论内部的图像数量如何，它们都将始终均匀地填充整个容器。

为了更好地理解，请提供一张图片：

HTML / CSS只是最好的，但我当然会接受其他想法。对此有所了解，所以任何帮助都会很棒。

Answer 1

你可以用CSS做到这一点。诀窍是使用float:left;制作图像width:50%;。如果最后一个图像恰好是奇数图像，那么我们需要使其全宽。这是使用选择器img:last-child:nth-child(odd)完成的。

以下是图片的完整CSS：

<强> CSS

img {
    float:left;
    width:50%;
}

/*
* This makes the last image (if odd)
* full width.
*/
img:last-child:nth-child(odd) {
    width:100%;
}

/*
 Special rules for 2 images
*/

div.container > img:first-child:nth-last-child(2) {
    width:100%;
}

div.container > img:last-child:nth-child(2) {
    width:100%;
}

这是完整的 demo 。