防止单元间距在不同窗口/监视器大小上更改
防止单元间距在不同窗口/监视器大小上更改
提问于 2022-07-27 21:54:06
如何防止以下代码中的图像之间的空间在不同大小的监视器上查看时发生变化？显示器越高，它们之间的差距就越大。您还可以通过垂直调整窗口大小来模拟效果。
换句话说，我需要在不同的显示器大小/视口垂直调整大小的情况下，将图像锁定在不太远的地方，也不需要彼此粘在一起。
Codepen：https://codepen.io/MarwanAK10/pen/RwMLdJQ
HTML：
<img id="image-470-7" src="https://i.imgur.com/Vu6d6c8.png">
<img id="image-471-7" src="https://i.imgur.com/EC923K4.png">
<div id="div_block-481-7">
</div>
<div id="div_block-482-7">
</div>
</div>CSS：
#div_block-479-7 {
display: grid;
grid-template-columns: repeat(20, 5%);
grid-template-rows: repeat(20, 5%);
width: 100vw;
height: 100vh;
background-color:crimson;
}
#div_block-481-7 {
grid-column: 1/11;
grid-row: 1/-1;
width: 100%;
background-color:brown;
}
#div_block-482-7 {
grid-column: 11/21;
grid-row: 1/-1;
width: 100%;
background-color:violet;
}
#image-352-7{
grid-column: 9/-1;
grid-row: 4/-1;
z-index:8;
}
#image-470-7{
grid-column: 8/-1;
grid-row: 5/-1;
z-index:6;
}
#image-471-7{
grid-column: 9/-1;
grid-row: 12/-1;
z-index:7;
}谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-27 22:12:25
您可以尝试使用<span>并将位置设置为relative
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73145009
复制相关文章
相似问题
腾讯云开发者
