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

如何使用colums？

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

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

1 个答案: