7

我想要的效果：

在此处输入图像描述

我正在使用 foreach 循环来显示此容器元素中的 div。快速而肮脏的方法是执行 index % 4 （或任何每行的 div 数）并相应地设置样式，但如果有的话，我正在寻找一种仅使用 css 的方法。

我现在正在玩的一件事是对具有负边距的容器元素应用白色边框，以掩盖外部 div 的边框......还有其他选择吗？

编辑：我正在尝试“容器周围的白色边框”方法，但它不起作用，因为我将 div 向左浮动（用于响应性） - 所以一旦容器元素的白色边框与黑色边框重叠div，div被推到下一行。

4

4 回答 4

7

我有两个答案供您考虑...第一个是您要求的纯 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 数乘以行数减一。所以基本上，选择倒数第二行最后一个 div 之后的所有 div。

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

http://jsfiddle.net/t7atH/

无论您决定坚持仅使用 css 方法，还是尝试添加一点 php，我希望这对您有所帮助。祝你好运！

更新：作为事后的想法，我可能应该添加第三种解决方案。如果您能够添加环绕 div 的行元素，则可以使用:first-child和:last-child禁用边框。

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

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

于 2013-10-12T22:48:03.367 回答
2

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

然而，我决定稍微不同……而不是在标记中添加一个额外的元素，我使用了一个 CSS 伪元素。

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

http://jsfiddle.net/Avc2v/

于 2014-02-28T15:16:02.577 回答
2

我查看了所有解决方案，发现这个是最好的。因为它是响应式的。所以我编辑了一下，它看起来和工作得更好......

它是如何工作的？

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

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

小提琴

<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>
于 2015-07-10T07:23:23.887 回答
2

这是一个使用 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/

于 2019-02-24T15:40:13.657 回答