没有外边框但具有所有内边框的框网格

Question

我想要的效果：

我正在使用foreach循环来显示此容器元素中的div。快速和肮脏的是做索引％4（或者每行的div数是多少）和相应的样式，但我正在寻找一种只有css的方法，如果有的话。

我现在正在玩的一件事是将白色边框应用于具有负边距的容器元素，以掩盖外部div的边界......还有其他替代方案吗？

编辑：我正在尝试“容器周围的白色边框”方法，但它没有工作，因为我浮动divs左（为响应性） - 所以只要容器元素的白色边框重叠黑色边框div，div被推到下一行。

Answer 1

我有两个答案让你考虑......第一个是像你要求的纯css，第二个是使用少量的php和css。通常，纯css解决方案是理想的，但是根据情况，第二解决方案也可以具有一些益处。

所以，首先，css。你肯定是在正确的轨道上，外边框覆盖div的边界。我调整了你的方法一点点。我没有将该边框放在父元素上，而是创建了一个额外的子元素（在这种情况下是一个跨度），并将其绝对定位在父元素内，以跨越整个宽度和高度。我把边框放在它上面而不是父边框上，因为它是绝对定位的，所以它不会干扰其他元素的定位。

此外，如果你遇到边界打破布局的麻烦，box-sizing: border-box;可以派上用场。我在我的例子中使用了它。

以下是该方法的演示：

http://jsfiddle.net/PGygr/

---

至于第二种解决方案，我使用了一些更高级的选择器来覆盖某些盒子上的某些边框。这样，它们不仅仅是隐藏的......它们实际上并不存在。出于这个原因，我宁愿在第一个使用这个解决方案，但这只是我的意见。

首先，我在所有div上放置了右边界和边界底边。这对于除了每行的最后一行以及底行中的所有div之外的所有div都是正确的。

要选择每行中的最后一个div来取消它的右侧边框，我可以这样做：

.container div:nth-child(Xn) {
    border-right: none;
}

其中'X'将替换为每行中div的数量。如果我使用嵌入式样式执行此操作，我可以使用php动态地将该数字放在那里。

要选择和停用最后一行的底部边框，我可以这样做：

.container div:nth-child(X) ~ div {
    border-bottom: none;
}

同样，'X'将与php一起放置，并且将等于每行中div的数量，乘以行数减去1。所以基本上，选择在倒数第二行的最后一个div之后的所有div。

这是演示的小提琴，减去它的php方面（我手动将数字输入到css中）

http://jsfiddle.net/t7atH/

无论你决定坚持使用css方法，还是尝试添加一些小软件，我希望这对你有帮助。祝你好运！

更新：作为事后的想法，我应该添加第三种解决方案。如果你能够添加包围div的行元素，你可以利用:first-child和:last-child来禁用你的边界。

我认为这是相当不言自明的，所以只需看看代码：

http://jsfiddle.net/PGygr/3/

Answer 2

我需要解决同样的问题并使用Blake的第一个解决方案 - 谢谢！

但是，我决定采用稍微不同的方式...而不是在标记中添加额外的元素，而是使用CSS伪元素。

.container:before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid #eee;
}

http://jsfiddle.net/Avc2v/

Answer 3

我看了所有的解决方案，我发现这个是最好的。因为它是响应性的。所以我编辑了一下，看起来效果更好......

它是如何工作的？

我们正在做的是添加一个带有空内容的伪类，其宽度为1px，高度为1px，位于容器div的顶部和左侧[标有“.border-override”]。

注意：此解决方案与页面顶部的解决方案完全相同，不同之处在于，当使用不同宽度的div和不同宽度的屏幕上的不同排序时，页面顶部的解决方案会遇到错误。 [感谢首页回复，但使用PHP和CSS，就像试图硬编码表！如果你知道最后一行和最后一列，你就是在画一张桌子，所以最好使用一张桌子而不是div的麻烦...]

Fiddle

<style>
.border-override {
background: white;
position: relative;
}
.border-override::before {
position:absolute;
height:1px;
width:100%;
top:-1px;
left:0;
background-color: white;
border:1px solid white;
z-index:100;
content: ' ';
}
.border-override::after {
position:absolute;
width:1px;
height:100%;
top:0;
left:-1px;
background-color: white;
border:1px solid white;
z-index:100;
content: ' ';
}
.border-override div {
width: 100px;
height: 50px;
border-top: 1px solid blue;
border-left: 1px solid blue;  
float:left;
position:relative;
z-index:1;
}
</style>

<div class="border-override">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>  
</div>

Answer 4

这是一个使用css网格的非常简单的解决方案 - 但它只适用于网格中没有空单元格的情况。

.container {
display: grid;
grid-gap: 2px;  /* the length of inner borders */
background-color: black;  /* the color of the inner borders */
}
.cell {
background-color: white;
}

想法是用背景颜色填充容器。每个单元格将使用自己的背景颜色重新墨水，只留下间隙可见。

http://jsfiddle.net/mq8Ldpbt/