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

前端之家收集整理的这篇文章主要介绍了css – 没有外边框但具有所有内边框的框网格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想要的效果

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

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

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

最佳答案
我有两个答案让你考虑……第一个是像你要求的纯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/

原文链接:https://www.f2er.com/css/427348.html

猜你在找的CSS相关文章