gpt4 book ai didi

HTML如何保持div相互接触

转载 作者:太空宇宙 更新时间:2023-11-04 07:37:03 26 4
gpt4 key购买 nike

当我调整窗口大小时(至少在 Firefox 中)然后我的 div 彼此分开。我怎样才能让我的 div 很好地相互接触?

切记,整个背景图像必须完全显示,我有解决方案,背景图像位于滚动条后面,但我不希望这样。

html, body {
margin: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
}

.Div1 {
background-image: url("https://imgur.com/7NQ3IOt.jpg");
background-size: 100%, 100%;
background-repeat: no-repeat;

position: relative;
height: 76.1vw;
width: 100%;
}

.Div2 {
background-image: url("https://imgur.com/CjVMSqG.jpg");
background-size: 100%, 100%;
background-repeat: no-repeat;

position: relative;
height: 169vw;
width: 100%;
}

.Btns {
position: absolute;
font-size: 2.1vw;
left: 16.5vw;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="Div1">
<button class="Btns" style="top: 4.8vw">Button 1</button>
</div>
<div class="Div2">
<button class="Btns" style="top: 4.3vw">Button 1</button>
</div>
</body>
</html>

最佳答案

您的 div 相互接触。但是第一个div的背景图片高度小于div的高度。

从背景大小规则中删除逗号:background-size: 100% 100%;

关于HTML如何保持div相互接触,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48865092/

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