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

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/