仅在内部使用边框的响应式网格

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

在高于600px的，则框是25％（于是四个并排）。

在450px处，框为50％，这可以通过添加一个新类。但是这对于奇数很棘手。所以在451 - 600像素，33.3％的盒子，我错过了边界。

有没有人知道如何使这容易？或者我的整个方法是错误的？

谢谢！

Answer 1

你不需要偶数班和最后一班。 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; 
    } 
}