10

我想使用 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等较旧的浏览器。

4

5 回答 5

14

我想出了这种方法，我认为它在使用最少的 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;
}

It introduces an extra wrapping element around the whole grid (which isn't perfect either) but I've found this to be a worthwhile compromise, despite. The lack of ability to simply style the grid-gaps directly is a shortcoming with CSS Grid that should be addressed with the spec.

于 2017-12-20T21:35:44.317 回答
3

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/

于 2012-12-09T23:27:35.780 回答
1

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

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";
}​
于 2012-12-12T03:05:59.343 回答
0

If you're looking for a solution without JavaScript that works with an irregular amount of "table cells" I've created a solution with css border and pseudo-classes.

See this post here: https://stackoverflow.com/a/49309785/6560093

于 2018-03-17T16:28:45.680 回答
-2

在这里你可以找到我的 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。

于 2012-12-10T00:08:18.213 回答