Question

我正在构建一个包含7x3块的图像网格，但是一个块需要填充2x2。我想使用一个列表，因为它必须响应（2x2应该在移动设备下面弹出）。我试着避免使用javascript。但我不能让它发挥作用 - 任何想法？

大网格：

img  img  img  img  img  img  img
img  img  img  img  blck....  img
img  img  img  img  blck....  img

移动网格：

img  img  img  img
img  img  img  img  
img  img  img  img  
img  img  img  img  
blck..............
blck..............

Answer 1

办公室的一位朋友找到了一个很好的解决方案

<html>
<head>
<style>
.images {
    width: 100%;
    max-width: 1280px;
    position: relative;
}
img {
    width: 14.285714286%;
    height: auto;
    float: left;
}
.group {
    max-width: 42.857142857%;
    float: left;
}
.group img {
    width: 33.333333333%;
}
.teaser {
    width: 28.571428571%;
    background-color: blue;
    color: #fff;
    text-align: center;
    float: left;
    padding-bottom: 28.571428571%;
    position: relative;
}
.teaser div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: blue;
}
@media (max-width: 480px) {
    img {
        width: 25%;
    }
    .group {
        max-width: 75%;
    }
    .group img {
        width: 33.333333333%;
    }
    .teaser {
        position: absolute;
        width: 100%;
        padding-bottom: 100%;
        float: none;
        margin-top: 100%;
    }
}
</style>
</head>
<body>
    <div class="images">
        <div class="group">
            <img src="http://placehold.it/400x400/EBE824/fff" alt="" />
            <img src="http://placehold.it/400x400/CECAA4/fff" alt="" />
            <img src="http://placehold.it/400x400/62C6A0/fff" alt="" />
            <img src="http://placehold.it/400x400/F8F07E/fff" alt="" />
            <img src="http://placehold.it/400x400/0F8B4B/fff" alt="" />
            <img src="http://placehold.it/400x400/EFB92B/fff" alt="" />
            <img src="http://placehold.it/400x400/63D1D2/fff" alt="" />
            <img src="http://placehold.it/400x400/F5C851/fff" alt="" />
            <img src="http://placehold.it/400x400/42BFC0/fff" alt="" />
        </div>
        <img src="http://placehold.it/400x400/C44D58/fff" alt="" />
        <img src="http://placehold.it/400x400/FF6B6B/fff" alt="" />
        <img src="http://placehold.it/400x400/C7F464/fff" alt="" />
        <img src="http://placehold.it/400x400/4ECDC4/fff" alt="" />
        <div class="teaser">
            <div>follow me now</div>
        </div>
        <img src="http://placehold.it/400x400/556270/fff" alt="" />
        <img src="http://placehold.it/400x400/542437/fff" alt="" />
        <img src="http://placehold.it/400x400/53777A/fff" alt="" />
        <img src="http://placehold.it/400x400/C02942/fff" alt="" />
    </div>
</body>
</html>

各种尺寸的图像网格

1 个答案: