How to add supporting line to each row in grid display(如何在网格显示中为每行添加支撑线)
本文介绍了如何在网格显示中为每行添加支撑线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建一个元素,它显示一组任意的图标,就像字符串上的珠子一样。到目前为止,我已经用网格显示了图标的排列,如下所示(出于演示目的,将图标替换为正方形): 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
body {
width: 90%;
max-width: 300px;
margin: 2em auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.container > div {
border-radius: 5px;
background-color: rgb(36,33,33);
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, auto));
gap: 20px;
grid-auto-rows: minmax(30px, auto);
}
<h1>Simple grid example</h1>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
但我不知道如何在每一行上为图标创建一条线。参考图片:
灰色线条应该在黑色方块后面。想法:
将div动态添加到看起来像行的
container
,然后设置它们的grid-row
和grid-col
属性以与块重叠。不是只将黑色正方形作为
container
的元素,而是使用包含一个黑色正方形和一个水平线段的div,以便每个黑色正方形都带有一小段线。然后检测每行的边框,并移动线条或其宽度的一半,使其不显示在边上。
这两个解决方案似乎都很复杂,所以在我进入兔子洞之前,我想问一下是否有更简单的方法,即使是不需要JS的方法。
推荐答案
我认为使用pseudo-elements
会更好,因为不需要向DOM添加额外的元素。
- 为所有单元格创建具有所需属性的
pseudo-element
。 - 向左移动
pseudo-element
。 - 添加最后添加
overflow: hidden;
到.container
为隐藏 不必要的pseudo-elements
。
.container div::after {
content: '';
width: calc(var(--cell) + var(--column-gap)); /* 30px + 20px */
height: var(--line-height); /* 3px */
position: absolute;
top: 50%;
left: -50%;
background-color: gray;
transform: translate(-50%, -50%);
z-index: -1;
}
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--cell: 30px;
--column-gap: 20px;
--line-height: 3px;
}
body {
width: 90%;
/* max-width: 300px; */
margin: 2em auto;
font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}
.container {
display: flex;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--cell), auto));
gap: var(--column-gap);
grid-auto-rows: minmax(var(--cell), auto);
overflow: hidden; /* hide left side */
}
.container>div {
position: relative;
border-radius: 5px;
background-color: rgb(36, 33, 33);
}
.container div::after {
content: '';
width: calc(var(--cell) + var(--column-gap)); /* 30px + 20px */
height: var(--line-height); /* 3px */
position: absolute;
top: 50%;
left: -50%;
background-color: gray;
transform: translate(-50%, -50%);
z-index: -1;
}
<h1>Simple grid example</h1>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
这篇关于如何在网格显示中为每行添加支撑线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:如何在网格显示中为每行添加支撑线
猜你喜欢
- Fetch API 如何获取响应体? 2022-01-01
- addEventListener 在 IE 11 中不起作用 2022-01-01
- Css:将嵌套元素定位在父元素边界之外一点 2022-09-07
- 400或500级别的HTTP响应 2022-01-01
- 失败的 Canvas 360 jquery 插件 2022-01-01
- Flexslider 箭头未正确显示 2022-01-01
- Quasar 2+Apollo:错误:找不到ID为默认的Apollo客户端。如果您在组件设置之外,请使用ProvideApolloClient() 2022-01-01
- 使用RSelum从网站(报纸档案)中抓取多个网页 2022-09-06
- CSS媒体查询(最大高度)不起作用,但为什么? 2022-01-01
- 如何使用 JSON 格式的 jQuery AJAX 从 .cfm 页面输出查 2022-01-01