css - 在CSS中平铺不同大小的图像

Question

我有几张图片想平铺，比如 image.有 3 张相同宽度和高度的图片，但其中一张较大，占用的空间应该是其他图片的两倍。

我设法得到的最多的是让它平铺，但下一行出现在上面一行中的大图像结束的地方。

(如果你不明白我的解释，它显示在图像 here 中。)

这是 html:

        <div class="portfolio">
            <div class="row">
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="largeWidthImg"/>
            </div>
            <div class="row">
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="smallWidthImg"/>
                <img src="" alt="" class="smallWidthImg"/>
            </div>
        </div>

这是 CSS:

.portfolio {
position: absolute;
width: 77.1%;
top: 165%;;
left: 50%;
transform: translate(-50%, 0);}

.smallWidthImg {
float: left;
width: 14.47%;
padding: 0 0.85% 0.85% 0.85%;}

.smallWidthImg {
float: left;
width: 14.47%;
padding: 0 0.85% 0.85% 0.85%;}

.smallWidthImg:first-child {
padding-left: 0;}

.smallWidthImg:last-child {
padding-right: 0;}

.largeWidthImg {
float: left;
width: 30.64%;
padding: 0 0.85% 0.85% 0.85%;}

.largeWidthImg:first-child {
padding-left: 0;}

.largeWidthImg:last-child {
padding-right: 0;}

仅使用 CSS 是否可行？
(我不懂javascript，所以我不能用javascript来做)

非常感谢任何帮助

Answer 1

使用列怎么样？

<div class="portfolio">
    <div class="row">
        <div class="col">
            <div class="row">
                <img src="./nodejs.png" alt="" class="smallWidthImg"/>
                <img src="./nodejs.png" alt="" class="smallWidthImg"/>
                <img src="./nodejs.png" alt="" class="smallWidthImg"/>
            </div>
            <div class="row">
                <img src="./nodejs.png" alt=""class="smallWidthImg"/>
                <img src="./nodejs.png" alt=""class="smallWidthImg"/>
                <img src="./nodejs.png" alt=""class="smallWidthImg"/>
            </div>
            <img src="./nodejs.png" alt="" class="largeWidthImg"/>
        </div>
    </div>
</div>