css - 仅在内部具有边框的响应式网格

Question

我正在尝试创建一个仅在内部 div 上带有边框的响应式网格。

我通过对除最后一个没有边框的每个 div 使用 border-right 来做到这一点。当我使用媒体查询更改框的宽度、移动页面上的框位置时，问题就来了，最后一个 div 成为下一行的第一个 div，因此它缺少边框。

这是 JSFiddle example .

HTML:

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box even">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box last even">
    <p>Box 4</p>
</div>

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box even">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box last even">
    <p>Box 4</p>
</div>

CSS:

.box {
    float: left;
    width: 25%;
    height: 300px;
    text-align: center;
    border-right: 1px solid black;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
}

.box.last {
     border: none;
}

@media screen and (max-width: 600px) {
    .box {
        width: 33.3333333333%;
    }

    .box.last {
        border-right: 1px solid black;
    }
}

@media screen and (max-width: 450px) {
    .box {
        width: 50%;
    }

    .box.even {
        border: none;
    }
}

@media screen and (max-width: 300px) {
    .box {
        width: 100%;
        border: none;
    }
}

在 600 像素以上，框占 25%(因此四个并排)。

在 450 像素处，框为 50%，添加一个新类就可以了。但这对于奇数会变得棘手。所以在 451 - 600 像素，框为 33.3%，我缺少边框。

有谁知道如何使这变得容易吗？还是我的整个方法都错了？

谢谢!

Answer 1

你不需要 even 和 last 类。 nth-child() 可以解决问题。

http://jsfiddle.net/dzyyubz6/1/

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box">
    <p>Box 4</p>
</div>

<div class = "box">
    <p>Box 1</p>
</div>

<div class = "box">
    <p>Box 2</p>
</div>

<div class = "box">
    <p>Box 3</p>
</div>

<div class = "box">
    <p>Box 4</p>
</div>

.box {
    float: left;
    width: 25%;
    height: 300px;
    text-align: center;
    border-right: 1px solid black;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;   
    box-sizing: border-box; 
}
.box:nth-child(4n + 4){
    border: none;
}

@media screen and (max-width: 600px) {
    .box {
        width: 33.3333333333%;
    }
    .box:nth-child(4n + 4){
        border-right: 1px solid black;
    }
    .box:nth-child(3n + 3){
        border: none;
    }
}

@media screen and (max-width: 450px) {
    .box {
        width: 50%;
    }
     .box:nth-child(3n + 3){
        border-right: 1px solid black;
    }
     .box:nth-child(2n + 2){
        border: none;
    }
}

@media screen and (max-width: 300px) {
    .box {
        width: 100%;
        border: none !important;
    }
}