仅在元素之间显示边框网格线 [英] show border grid lines only between elements
本文介绍了仅在元素之间显示边框网格线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用CSS border 属性在<$ c $之间制作一个精细的 1px 网格c> span 元素，如此。
I'd like to use the CSS border attribute to make a fine 1px grid between span elements, like so.
|
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>
当 div 设置为<$时c $ c> 306px 并且元素重排，解决方案应该动态调整。
When the div is set to 306px and the elements reflow, the solution should adapt dynamically.
| |
1 | 2 | 3
-----|-----|-----
4 |
|
最好只使用CSS，或纯Javascript。可以忽略IE7之类的旧浏览器。
Preferably CSS only, or pure Javascript. Older browsers like IE7 can be ignored.
推荐答案
我正在使用此解决方案，它会自动设置边框。
I'm using this solution, which automatically sets the border.
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
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";
}
这篇关于仅在元素之间显示边框网格线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
