css - 如何在网格内放置边框?
问题描述
我正在使用 CSS 网格来构建一个相当复杂的界面。我需要在两列之间的 div 末尾放置一个边框。我怎么做?
完成的结果必须如下所示:
HTML
<div class="footer">
<div class="expandeble">
<div class="expID">
<label class="idLabel">XXXX</label>
</div>
</div>
</div>
SCSS
.footer {
display: flex;
width: 100vw;
height: available;
}
.expandeble {
display: grid;
height: 6.15vh;
grid-template-columns: ;
15.62vw 2.01vw 21.87vw 12.08vw 19.45vw 5.76vw 2.01vw 1.18vw 5vw 15.83vw;
grid-template-rows: minmax(18px, 1.76vw) minmax(max-content, 3.51vh) 1.76vw;
}
.expID {
grid-column-start: 3;
grid-row-start: 2;
}
Border 需要有这样的配置:
.placeBorder {
grid-column-start: 3;
grid-column-end: 9;
grid-row-start: 3;
}
解决方案
使用伪元素。
在网格布局中(如在 flex 布局中),容器上的伪元素被视为项目。因此,插入一个伪元素来模拟所需网格区域的边界。
.expandeble::after {
content: "";
border: 1px solid red;
height: 0;
grid-column-start: 3;
grid-column-end: 9;
grid-row-start: 3;
}
.expandeble {
display: grid;
height: 6.15vh;
grid-template-columns: 15.62vw 2.01vw 21.87vw 12.08vw 19.45vw 5.76vw 2.01vw 1.18vw 5vw 15.83vw;
grid-template-rows: minmax(18px, 1.76vw) minmax(max-content, 3.51vh) 1.76vw;
}
.expID {
grid-column-start: 3;
grid-row-start: 2;
}
/* new */
.expandeble::after {
content: "";
border: 1px solid red;
height: 0;
grid-column-start: 3;
grid-column-end: 9;
grid-row-start: 3;
}
<div class="footer">
<div class="expandeble">
<div class="expID">
<label class="idLabel">XXXX</label>
</div>
</div>
</div>
推荐阅读
- c# - 索引的 Asp.net core mvc 可选参数
- jestjs - JEST 更改测试用例的预格式化输出
- r - 计算样本量以进行 mcnemar 测试
- c# - 我该如何做用户输入时间 word.Add
- c# - Visual Studio 没有找到我的 Specflow 测试 - 可能的原因?
- python - 径向中值剖面 Python 3.6
- sql - JSON 提取值
- javascript - Mongoose如何将数组从子更新到父
- c++ - 如何使用 QCustomPlot 作为头文件?
- grpc - 什么是 grpc 中的 _MultiThreadedRendezvous 以及如何解析它