Css 仅在内侧有边框的响应网格

我试图创建一个只在内部div上有边框的响应网格

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

这是你的电话号码

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>

在600px以上，盒子为25%（因此四个并排）

在450px时，框为50%，添加一个新类就可以了。但对于奇数，这会变得棘手。因此，在451-600px，盒子的33.3%，我错过了边界

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

---

谢谢大家!

你不需要甚至是最后一节课。n-child（）完成了这个任务

方框1

方框2

方框3

方框4

方框1

方框2

方框3

方框4

.盒子{
浮动：左；
宽度：25%；
高度：300px；
文本对齐：居中；
右边框：1px纯黑；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.box:第n个子项（4n+4）{
边界：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.盒子{
宽度：33.3333%；
}
.box:第n个子项（4n+4）{
右边框：1px纯黑；
}
.box:第n个子项（3n+3）{
边界：无；
}
}
@媒体屏幕和屏幕（最大宽度：450px）{
.盒子{
宽度：50%；
}
.box:第n个子项（3n+3）{
右边框：1px纯黑；
}
.box:第n个子项（2n+2）{
边界：无；
}
}
@媒体屏幕和屏幕（最大宽度：300px）{
.盒子{
宽度：100%；
边界：没有！重要；
}
}

您不需要甚至是最后一节课。n-child（）完成了这个任务

方框1

方框2

方框3

方框4

方框1

方框2

方框3

方框4

.盒子{
浮动：左；
宽度：25%；
高度：300px；
文本对齐：居中；
右边框：1px纯黑；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.box:第n个子项（4n+4）{
边界：无；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.盒子{
宽度：33.3333%；
}
.box:第n个子项（4n+4）{
右边框：1px纯黑；
}
.box:第n个子项（3n+3）{
边界：无；
}
}
@媒体屏幕和屏幕（最大宽度：450px）{
.盒子{
宽度：50%；
}
.box:第n个子项（3n+3）{
右边框：1px纯黑；
}
.box:第n个子项（2n+2）{
边界：无；
}
}
@媒体屏幕和屏幕（最大宽度：300px）{
.盒子{
宽度：100%；
边界：没有！重要；
}
}

只有在可以使用新规则集的情况下，此想法才有效。假设可以（浏览器支持），可以通过将

网格间隙

与绘制的基础绝对定位元素（偏移到实际单元下方）组合来创建内边框，以创建边框错觉

专业人士

• 适应性强，即使没有足够的元素填充整行，也只有现有元素有边框
• 根本没有特定的

  n个子
  css目标。更改网格行数不会影响边框

• 边界不会碰撞或合并，以创建比预期更厚的边界

缺点

• 需要

  css网格

  才能工作
• （就本例而言）要删除外边缘边框（上/右/下/左），需要在网格上设置

  溢出：隐藏
  

HTML

---

只有在可以使用新规则集的情况下，此想法才有效。假设可以（浏览器支持），可以通过将

网格间隙

与绘制的基础绝对定位元素（偏移到实际单元下方）组合来创建内边框，以创建边框错觉

专业人士

• 适应性强，即使没有足够的元素填充整行，也只有现有元素有边框
• 根本没有特定的

  n个子
  css目标。更改网格行数不会影响边框

• 边界不会碰撞或合并，以创建比预期更厚的边界

缺点

• 需要

  css网格

  才能工作
• （就本例而言）要删除外边缘边框（上/右/下/左），需要在网格上设置

  溢出：隐藏
  

HTML

---

非常感谢您！我甚至不知道第n个孩子的功能！非常感谢。如果您点击我答案旁边的勾号，我将不胜感激。：）请注意，对于iTe中的第n个子选择器，没有浏览器支持。非常感谢！我甚至不知道第n个孩子的功能！非常感谢。如果您点击我答案旁边的勾号，我将不胜感激。：）请注意，IE中的第n个子选择器不支持浏览器

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

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

<div class="grid">
  <div class="grid-cell">
    <div class="cell-content">1</div>
  </div>
<div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  // prevents ::before borders from looking offset if not enough cells 
  grid-gap: 1px;
  // remove the edge borders
  overflow: hidden;
}

.grid-cell {
  position: relative;
}

// create the illusion of a border
.grid-cell::before {
  content: '';
  position: absolute;
  // match the grid gap for border thickness
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  // this becomes the border, and handles overlap
  background-color: #ddd;
}

.cell-content {
  position: relative;
  // fill in the cell color
  background-color: #fff;
}