gpt4 book ai didi

html - 网格右侧不需要的额外边框

转载 作者:行者123 更新时间:2023-11-27 22:46:58 28 4
gpt4 key购买 nike

我正在尝试为我的网格中的每张照片添加一个 border-right,这样它就会出现在两张照片之间,就像在图像上一样。但由于某种原因,页面右侧出现了一个不需要的大边框。不知道我怎样才能摆脱它。任何帮助将不胜感激。 https://jsfiddle.net/5a3t1hwx/ border

<div class="wrapper">
<div class="item" id="1"> <img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60"/></div>
<div class="item" id="2"> <img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" /></div>
<div class="item" id="1"> <img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" /></div>
<div class="item" id="2"> <img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" /></div>
</div>


.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 0px;
align-items: stretch;
padding: 0px 0px 0;
margin: 0px;
max-width: 100%;
position: absolute;
}

.item:hover {
transform: translateY(100px);
transition: .9s ease;



.item {
border: 0px solid #ccc;
max-width: 100%;
height: 100%;
padding: 0px 0px 0;
margin: -5px;
display: grid;
border-right: solid rgba(158,176,180,.1);
transition: all .75s cubic-bezier(.455,.03,.515,.955);

display: inline-block;
transition-duration: $defaultDuration;
transition-property: transform;

@include hideTapHighlightColor();
@include hardwareAccel();
@include improveAntiAlias();
}




.item:nth-child(4n):after {
content: "";
position: fixed;
right: 0;
z-index: 100;
top: 40px;
width: 6px;
height: 80px;
background-color: #E8143C;
}

.item:nth-child(4n-1):after {
content: "";
position: fixed;
right: 0;
z-index: 100;
bottom: 40px;
width: 6px;
height: 80px;
background-color: #E8143C;
}

.item:nth-child(4n-2):after {
content: "";
position: fixed;
right: 0;
z-index: 100;
top: 40px;
width: 6px;
height: 80px;
background-color: #E8143C;
}

.item:nth-child(4n-3):after {
content: "";
position: fixed;
right: 0;
z-index: 100;
bottom: 40px;
width: 6px;
height: 80px;
background-color: #E8143C;
}





/* Screen larger than 600px? 2 column */
@media (min-width: 500px) {
.wrapper {
grid-template-columns: repeat(1, 1fr);
}
}

/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
.wrapper {
grid-template-columns: repeat(2, 1fr);
}
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
.wrapper {
grid-template-columns: repeat(4, 1fr);
}
}

最佳答案

首先,捕获并修复您的 jsfiddle 中的错误。

  1. 删除 HTML 文件中的所有 CSS 代码。使用分离的 CSS 代码。
  2. 右括号 ( } ) 添加到您的.item:hover

然后,您的问题的解决方案:

  1. 改变 position: fixed; 在你的所有.item:nth-child(x):afterposition: absolute;
  2. position: relative; 添加到您的 .item

关于html - 网格右侧不需要的额外边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59599507/

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