1

何らかの理由で、ページの下部に大量の余分な空白があり、それを取り除くことができないようです。スペースの中に何も入れることも、取り除くこともできません。私はいくつかの調査を行いましたが、それは私の画像がそうであるという事実に関係しているという予感がありますが、 position:relativeまだ完全にはわかりません. を取り除く必要がある場合position:relative、またはを使用しない画像を配置する方法を誰か教えてもらえますposition:absoluteかposition: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>
4

2 に答える 2

1

これを変える

<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 を実行して移動すると、文書の残りの部分は移動していない場合と同じに保たれるため、その下のスペースを維持する必要があります。負のマージンを上にすると、画像が下に移動したものすべてが上に移動します。

于 2013-05-02T00:16:54.617 に答える
0

のように見える

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

が問題を引き起こしている場合は、変更してみてください

height: 680px;

問題が解決しないかどうかを確認する

于 2013-05-02T00:02:51.857 に答える