Question

我想使用CSS border属性在1px元素之间制作精美的span网格，就像这样。

     |    
  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等旧版浏览器可以忽略不计。

Answer 1

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;
}

DEMO： 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";
}

DEMO： http://jsfiddle.net/HTgKJ/1/

Answer 2

我提出了这种方法，我觉得它可以很好地处理最小的CSS和黑客攻击：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-gap s样式的能力是CSS Grid的一个缺点，应该用规范解决。

Answer 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";
}

Answer 4

如果你正在寻找一个没有JavaScript的解决方案，它可以处理不规则数量的“表格单元格”，我已经用css border和伪类创建了一个解决方案。

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

Answer 5

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

您只需要输入多少跨度，然后定义所需的列数。其他一切都是以恐怖的方式定义的。

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.

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

5 个答案:

1。 HTML + CSS 解决方案

2。 HTML + CSS + JavaScript 解决方案