仅在元素之间显示边框网格线答案

【问题标题】：show border grid lines only between elements仅在元素之间显示边框网格线
【发布时间】：2012-12-09 22:55:19
【问题描述】：

我想使用 CSS border 属性在 span 元素之间创建一个精细的 1px 网格，就像这样。

     |    
  1  |  2  
-----|-----
  3  |  4  
     |

这是我目前拥有的。显然它不太有效。

<html>
<head>
<style>
  div {
    width: 204px;
  }
  span {
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    border-left-width: 0;
    border-top-width: 0;
  }
</style>
</head>
<body>
<div><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>
</html>

当div 设置为306px 并且元素回流时，解决方案应该动态适应。

     |     |
  1  |  2  |  3
-----|-----|-----
  4  |
     |

最好只使用 CSS，或纯 Javascript。 IE7等老浏览器可以忽略。

【问题讨论】：

标签： javascript html css

【解决方案1】：

我想出了这种方法，我认为它在使用最少的 CSS 和 hack 时效果很好：https://codepen.io/eriklharper/pen/JMKMqa

<div class="border">
  <div class="grid">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
  </div>
</div>

.border {
  background-color: gray;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, auto));
  grid-gap: 1px;
}
.grid > div {
  background-color: white;
  padding: 10px;
}

它在整个网格周围引入了一个额外的包装元素（这也不完美），但我发现这是一个值得妥协的方案，尽管如此。无法直接设置 grid-gaps 的样式是 CSS Grid 的一个缺点，应该在规范中加以解决。

【讨论】：

您的示例包含实际上不是 CSS 的选择器：& > div。很高兴提到这一点，这样你就不会混淆新手。（或者只是用纯 CSS 重写它。）
为什么不在网格容器本身上使用background-color: gray;？您不需要额外的包装元素还是我错了？

【解决方案2】：

1。 HTML+CSS 解决方案

HTML：

<div>
    <i></i>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <i></i>
</div>

CSS：

div {
    position: relative;
    width: 202px;  /* or 303px (or 100px * n + n) */
    font-size: 0;
}

span {
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    border-left-width: 0;
    border-top-width: 0;
    font-size: 12px;
}

i {
    position: absolute;
    background: #fff;
    height: 1px;
    bottom: 0;
    left: 0;
    width: inherit;
}

i:first-child {
    height: auto;
    width: 1px;
    top: 0;
    left: auto;
    right: 0;
}

演示： http://jsfiddle.net/HTgKJ/

2。 HTML+CSS+JavaScript解决方案

HTML+CSS：

<!-- See approach 1. -->

JavaScript：

var block = document.querySelectorAll(".block");
for (var i = 0; i < block.length; i++) {
    var spanWidth = block[i].querySelector("span").clientWidth,
        n = Math.floor(block[i].clientWidth / spanWidth);
    
    block[i].querySelector("i:first-child").style.left =
        (n * spanWidth + (n - 1)) + "px";
}

演示： http://jsfiddle.net/HTgKJ/1/

【讨论】：

这行得通，但我并没有覆盖这些线条，而是一开始就没有它们。前者在缩放时会导致一些对齐问题。我正在使用不同的解决方案，这有点像其他答案，但在纯 JavaScript 中。

【解决方案3】：

我正在使用这个解决方案，它会自动设置边框。

http://jsfiddle.net/aLz2T/3/

HTML

<div><span>1</span><span>2</span><span>3</span><span>4</span></div>

CSS

div {
    width: 204px; /* adjust to get less/more columns */
}

span {
    display: inline-block;
    height: 100px;
    width: 100px;
    border: 1px solid #ccc;
    border-left-width: 0;
    border-top-width: 0;
}

JavaScript

var a = document.querySelector('div');

// columns
var b = parseInt(a.offsetWidth / (100 + 2), 10);

for(var c, d = document.querySelectorAll('span'), e = d.length, i = 0; c = d[i]; i++) {
    // column
    c.style.borderRightWidth = ((i + 1) % b) != 0 ? "1px" : "0";
    // row
    c.style.borderBottomWidth = parseInt(i / b, 10) * b < e - b ? "1px" : "0";
}

【讨论】：

【解决方案4】：

如果您正在寻找一个不使用 JavaScript 且适用于不规则数量的“表格单元格”的解决方案，我已经创建了一个带有 css border 和伪类的解决方案。

在此处查看此帖子：https://stackoverflow.com/a/49309785/6560093

【讨论】：

【解决方案5】：

在这里你可以找到我的 jQuery 解决方案。 http://jsfiddle.net/UZJmd/7/

您只需输入所需的 spans 数量，然后定义所需的 columns 数量。其他一切都是动态定义的。

1- var spanWidth = parseInt($("span").css("width")); 
2- var spanSize = $("span").size();
3- var nColumns = 2;
4- var nLines = Math.floor(spanSize/nColumns+0.5);
5- 
6- $(function() {
7-     $("div").css({"width": (spanWidth*nColumns + 1*(nColumns-1))+"px"});
8-     for(var i = 0; i <= spanSize; i++) {
10-         if((i+1)%nColumns == 0) {
11-             $('span').eq(i).css({"border-right": 0});
13-         }
14-         if(Math.floor(i/nColumns) >= nLines-1) {
15-             $('span').eq(i).css({"border-bottom": 0});
16-         }
17-     }
18- });

在第 3 行，我们定义了我们想要的列数。在第 10 行中，我们检查它是否是该行的最后一个跨度，并将右边框设置为 0。在第 14 行，我们检查我们是否在最后一行，然后将底部边框设置为 0。

【讨论】：

我不使用 jQuery，但我的解决方案类似，只是它动态获取列。
@pdknsk 是的，它非常相似，不同之处在于，在我的解决方案中，我们选择列的 n°，而在您的解决方案中，我们定义了 <div> 的大小。但是您只使用用户要求的 Javascript ;)
jQuery 在这里过于夸张和臃肿。