javascript 仅在元素之间显示边框网格线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13792755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show border grid lines only between elements
提问by
I'd like to use the CSS borderattribute to make a fine 1pxgrid between spanelements, like so.
我想使用 CSSborder属性1px在span元素之间制作一个精细的网格，就像这样。
|
1 | 2
-----|-----
3 | 4
|
This is what I currently have. It doesn't quite work obviously.
这就是我目前所拥有的。它显然不太有效。
<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>
When the divis set to 306pxand the elements reflow, the solution should adapt dynamically.
当div设置为306px并且元素回流时，解决方案应该动态适应。
| |
1 | 2 | 3
-----|-----|-----
4 |
|
Preferably CSS only, or pure Javascript. Older browsers like IE7 can be ignored.
最好只有 CSS，或纯 Javascript。可以忽略诸如 IE7 之类的旧浏览器。
采纳答案by VisioN
I'm using this solution, which automatically sets the border.
我正在使用这个解决方案，它会自动设置边框。
HTML
HTML
<div><span>1</span><span>2</span><span>3</span><span>4</span></div>?
CSS
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
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";
}?
回答by eriklharper
I came up with this approach, which I think works pretty well with minimal CSS and hacks: https://codepen.io/eriklharper/pen/JMKMqa
我想出了这种方法，我认为它在使用最少的 CSS 和 hacks 的情况下效果很好：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.
它在整个网格周围引入了一个额外的环绕元素（这也不完美），但我发现这是一个值得的妥协，尽管如此。缺乏grid-gap直接简单地设置s样式的能力是 CSS Grid 的一个缺点，应该通过规范来解决。
回答by VisioN
1. HTML+CSSsolution
1. HTML + CSS溶液
HTML:
HTML：
<div>
<i></i>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<i></i>
</div>?
CSS:
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/
演示：http : //jsfiddle.net/HTgKJ/
2. HTML+CSS+JavaScriptsolution
2. HTML+CSS+JavaScript解决方案
HTML+CSS:
HTML+CSS：
<!-- See approach 1. -->
JavaScript:
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";
}?
回答by Jan F?ssler
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 borderand pseudo-classes.
如果您正在寻找一个没有 JavaScript 的解决方案，它可以处理不规则数量的“表格单元格”，我已经创建了一个带有 cssborder和伪类的解决方案。
See this post here: https://stackoverflow.com/a/49309785/6560093
在此处查看此帖子：https: //stackoverflow.com/a/49309785/6560093
回答by Dim13i
Here you can find my solution with jQuery. http://jsfiddle.net/UZJmd/7/
在这里你可以找到我的 jQuery 解决方案。http://jsfiddle.net/UZJmd/7/
You just jave to put how many spansyou want and then define the number of columnsyou want. Everything else is defined dinamically.
您只需输入所需的跨度，然后定义所需的列数。其他一切都是动态定义的。
?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- });
In line 3we define the number of columns we want. In line 10we check if it's the last span of the line and we set the right border to 0. In line 14we check if we are in the last line and then set the bottom border to 0.
在第 3 行中，我们定义了所需的列数。在第 10 行，我们检查它是否是该行的最后一个跨度，并将右边框设置为 0。在第 14 行，我们检查我们是否在最后一行，然后将底部边框设置为 0。
