Question

我有一个缩略图网格：

.thumbnail-container {
          border: 1px solid red;
          float: left;
          width: 25%; (depending on screen size)
}

.thumbnail {
          display: block;
          height: auto;
          width: 200px;
          margin: 0 auto;
          padding: 0px;
}

你明白了......

grid

根据@media设备的屏幕宽度，有时会有5个拇指，有时候是4个，3个，2个... ...

正如您在图片中看到的，我的问题是缩略图之间的水平间距。由于每个拇指容器的宽度相等（图片中为25％）并且缩略图居中，因此在第1和第2，第2-3d，第3~第4之间存在双间距。相反，第一个拇指在左边有一半的空间，第四个拇指在右边：

就像这样：1（A）2（B）2（C）2（D）1

我想这样：1（A）1（B）1（C）1（D）1

关于如何使间距相同的任何想法？

非常感谢！

Answer 1

我制作了这个响应式网格，可以使用CSS完成所需的操作。它使用媒体查询和 nth-child（）。

水平和垂直边距相等。

<强> FIDDLE

它表明您可以使用计算来定位彼此之间具有相等边距的网格元素。元素和窗口之间的边距也是相同的。

屏幕宽度大于751px的代码尚未编写，但您明白了。这是代码：

HTML：

<div id="container">
    <div class="wrap">
        <div class="foto">1</div>
    </div>
    <div class="wrap">
        <div class="foto">2</div>
    </div>
    <div class="wrap">
        <div class="foto">3</div>
    </div>
    ... And so on ...
</div>

CSS：

html, body {
    margin:0;
    padding:0;
    min-width:150px;
}
.wrap {
    float:left;
    position:relative;
}
.foto {
    width: 150px;
    height: 150px;
    background: gold;
    position:absolute;
}

#warning{display:none;}
@media screen and (min-width: 631px) {
    .wrap {
        width:20%;
        padding-bottom:25%;
    }
    .wrap:nth-child(4n+2), .wrap:nth-child(4n+3){

    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-30px;
    }
    .wrap:nth-child(4n+2){
        margin:0 5% 0 7.5%;
    }
    .wrap:nth-child(4n+3){
     margin-right:7.5%;
    }
    .wrap:nth-child(4n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
    .wrap:nth-child(4n+3) .foto{
        right:50%;
        margin-right:-75px;
    }
    .wrap:nth-child(4n) .foto{
        left:-30px;
    }   
    #container{
        margin-top:-45px;
    }
}

@media screen and (min-width: 481px) and (max-width: 631px) {
    .wrap {
        width:25%;
        padding-bottom:33.3%;
    }
    .wrap:nth-child(3n+2){
        margin:0 12.5%;        
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-37px;
    }
     .wrap:nth-child(3n+2) .foto{
        left:50%;
        margin-left:-75px;
    }
     .wrap:nth-child(3n) .foto{
        left:-37px;
    }
    #container{
        margin-top:-37px;
    }
}


@media screen and (min-width: 331px) and (max-width: 480px) {
    .wrap {
        width:33.3%;
        padding-bottom:50%;
        clear:left;
    }
    .wrap:nth-child(even) {
        float:right;
        clear:right;
    }
    .wrap .foto {
        top:-75px;
        margin-top:100%;
        right:-50px;
    }
    .wrap:nth-child(even) .foto {
        left:-50px;
    }
    .wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
        bottom:-75px;
        margin-bottom:100%;
    }
    #container{
        margin-top:-25px;
    }
}


@media screen and (max-width: 330px) {
    .wrap {
        width:50%;
        padding-bottom:100%;
        clear:left;
    }
    .wrap:nth-child(odd) .foto {
        right:-75px;
        bottom:0;
        bottom:-75px;
        margin-bottom:100%;
    }
    .wrap:nth-child(even) .foto {
        top:0px;
        right:-75px;
        top:-75px;
        margin-top:100%;
    }
}

@media screen and (min-width: 751px) {
    #warning{
        color:#fff;
        display:block;
        position:fixed;
        width:100%;
        height:50%;
        top:25%;
        left:0;
        background:#000;
        text-align:center;
        font-size:30px;
}

响应式缩略图网格等间距

1 个答案: