gpt4 book ai didi

jquery - margin 底部 100% 和 margin 顶部 -100% 不起作用

转载 作者:行者123 更新时间:2023-11-28 16:31:43 25 4
gpt4 key购买 nike

我无法理解为什么当我使用 margin-top 时我的第三个 div 没有堆叠在 -100% 高度。我正在使用 Greensock 为 div 的运动制作动画,而 margin-left 非常适合第一个 div。但是当我尝试将上部 div 向下移动时,它会更高。我知道高度是基于宽度的,但据我了解,如果我使用 100%,尺寸是多少并不重要。我首先尝试使用 margin-bottom 但它没有用。任何帮助将不胜感激。谢谢。这是 jsFiddle https://jsfiddle.net/kqyyq78q/

<body>
<a id="overlay"></a>
<div id="start">
<img src="http://imgh.us/roadtest1.svg" id="road" />
</div>
<div id="num1">
<img src="http://imgh.us/roadtest2.svg" id="road" />
</div>
<div id="num2">
<img src="http://imgh.us/roadtest3.svg" id="road" />
</div>
</body>

html,
body {
width: 100%;
height: 100%;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
overflow: hidden;
font-size: 100%;
position: absolute;
}

#overlay {
z-index: 8;
position: fixed;
margin-left: 50%;
padding-top: 20%;
}

#road {
width: 100%;
height: auto;
}

#start {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
}

#num1 {
width: 100%;
height: 100%;
position: fixed;
margin-left: 100%;
}

#num2 {
width: 100%;
height: 100%;
position: fixed;
margin-top: -100%;
}

最佳答案

实际情况是您在边距上使用了百分比,就好像它们是相对于图像高度一样。

边距和填充的百分比是相对于宽度的。这意味着只要标记的宽度不等于其高度,您的 margin-top: -100%; 规则就会越过标记。另一方面,css 规则 top: -100%; 基于高度,并且会起作用。

我稍微修改了您的代码以显示 a working example of this .

#num2 {
width: 100%;
height: 100%;
position: absolute;
top: -100%;
}

关于jquery - margin 底部 100% 和 margin 顶部 -100% 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35215948/

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