我有网格框,item2
位于 hi 区域的末尾 b
:
.wrapper > div {
background-color: gray;
padding: 20px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
grid-template-rows: 150px 150px;
grid-template-areas:
"a b"
"c d"
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
justify-self: end;
position: relative;
right: -20px;
}
.item3 {
grid-area: d;
justify-self: start;
}
<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
我需要将 item2
从他的位置向右移动一点,因此我使用relative
位置和right: -20px
。它在 Chrome 和 Firefox 中完美运行,但在 Safari 版本 11.1.2 (13605.3.8) 中似乎 justify-self: end
不起作用:我的意思是,item2
是在区域b
的左侧。如果没有 right: -20px
元素 item2
位于其区域的右侧。我该如何修复它?
最佳答案
您可以使用负边距来代替:
.wrapper > div {
background-color: gray;
padding: 20px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
grid-template-rows: 150px 150px;
grid-template-areas:
"a b"
"c d"
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
justify-self: end;
margin-right: -20px;
}
.item3 {
grid-area: d;
justify-self: start;
}
<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
或者翻译:
.wrapper > div {
background-color: gray;
padding: 20px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
grid-template-rows: 150px 150px;
grid-template-areas:
"a b"
"c d"
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
justify-self: end;
transform:translateX(20px);
}
.item3 {
grid-area: d;
justify-self: start;
}
<div class="wrapper">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
关于css - justify-self 和相对位置无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54290045/