gpt4 book ai didi

css - 如何定位 CSS 网格中的最后一列?

转载 作者:行者123 更新时间:2023-12-05 04:46:40 24 4
gpt4 key购买 nike

<分区>

当您使用 grid-areas 时,元素的顺序可能会改变。这将导致视觉 :last-child 发生变化。是否有 CSS 选择器来定位网格中的最后一列?类似于 :last-grid-column

我要解决的问题。我喜欢用边框线分隔列。但是我不希望最后一列有边框,因为那样在视觉上没有意义。现在,如果我用 :last-child 定位它,它会一直工作,直到我将 grid-template-areas 的顺序更改为 d b c a。现在第一列没有边框,因为在 DOM 中它仍然是最后一个子列。

我知道你可以解决你明确说这些是网格区域的问题,在这种情况下我会省略 a 的边框。但是如果我能用语义来描述它会更加灵活,然后我可以自由地改变模板区域而不用担心边界线会被弄乱。

.grid 
{
display: grid;
grid-template-areas: "d b c a";
grid-template-columns: repeat( 4, 1fr );
}

.column.a {
grid-area: a;
}

.column.b {
grid-area: b;
}

.column.c {
grid-area: c;
}

.column.d {
grid-area: d;
}

.column:not(:last-child) {
border-right: 1px solid black;
}

/* Flavor */
.grid
{
margin: 20px auto;
max-width: 600px;
padding: 20px;
background: #F4F4F4;
}

.column {
width: 100%;
text-align: center;
}
<div class="grid">
<div class="column a">A</div>
<div class="column b">B</div>
<div class="column c">C</div>
<div class="column d">D</div>
</div>

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com