Question

我正在尝试创建一个仅在内部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>

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 - 600px，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;
    }
}

Answer 2

只有在您可以使用新的css-grid规则集时，此提示才有效。假设您可以（浏览器支持明智），您可以通过将grid-gap与绘制的底层绝对定位元素组合来创建内边框，该元素在实际单元格下方偏移以创建边框错觉。

<强>赞成

适应性强，即使你没有足够的元素来填充整行，只有现有元素会有边框
根本没有特定的nth-child css定位。更改网格行数不会影响边框。
边框不会发生冲突或组合以创建比预期更厚的

<强>缺点

需要css-grid才能工作
（就此示例而言）删除网格上需要overflow: hidden的外边框边框（顶部/右侧/底部/左侧）

HTML

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

CSS / SCSS

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

Fiddle

响应网格与内部边界仅

2 个答案: