gpt4 book ai didi

html - 页面底部的额外空间

转载 作者:行者123 更新时间:2023-11-28 18:23:27 24 4
gpt4 key购买 nike

出于某种原因,我的页面底部有大量额外的空白,我似乎无法摆脱。我无法将任何东西放入空间内,也无法摆脱它。我做了一些研究,我有一种预感,这与我的图像是 position:relative 这一事实有关,但我仍然不完全确定。如果我需要摆脱 position:relative,有人可以告诉我如何放置不使用 position:absoluteposition:relative 的图像?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>

<body>
<center>
<img src="img/SDL 4 Final Recompress.jpg" height="283" style="position: relative;"/>
<br/>
<hr width="500"/>


<img src="img/Studio-Light_sxu1.png" style="position: relative; top: -496px; left: 30px; z-index: 3; height: 200px;"/>
<img src="img/Studio-Light_sxu1 flipped.png" style="position: relative; top: -496px; left: 650px; z-index: 3; height: 200px;"/>

<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" wmode="transparent" style="position:relative; z-index: 2; top:100px; left:-200px">
</embed>

<img src="img/Stage-Background.png" style="position: relative; z-index: 1; height: 680px; top:-500px"/>
</center>

<div id="nav">
<p>All Episodes</p>
<a>Contact</a>
<a>Facebook</a>
<a>Meet the Crew</a>
</div>





</body>
</html>

最佳答案

改变这个

<img src="img/Stage-Background.png" style="position: relative; z-index: 1; height: 680px; top:-500px"/>

<img src="img/Stage-Background.png" style="z-index: 1; height: 680px; margin-top:-500px"/>

当您执行 position: relative 并移动它时,它会使文档的其余部分保持不变,就好像您没有移动它一样,因此它必须保留其下方的空间。如果你做一个负边距顶部,它会把图像向下移动的所有东西都拉下来。

关于html - 页面底部的额外空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16328256/

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