html栅格系统显示边框,css – 没有外边框但具有所有内边框的框网格

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

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

另外,Box-sizing：border-Box;如果您遇到边界破坏布局的麻烦,可能会派上用场.我在我的例子中使用了它.

以下是该方法的演示：

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

首先,我在所有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中)

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

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

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