我正在努力为教会建立一个网站。每个页面的顶部都有一个标题，左侧有一个垂直菜单。菜单和内容应居中，宽度为975像素。问题在于菜单右侧的图像，标题和菜单都向左移动。我尝试过对图像使用绝对定位，但没有区别。
索引页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>St Peter's Church, Marsh Baldon Refurbishment Project</title>
<meta content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)" name="GENERATOR" />
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
<style type="text/css">a.navwhite:link { text-decoration: none; color: #ffffff; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navwhite:visited { text-decoration: none; color: #ffffff; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navwhite:hover { text-decoration: underline; color: #ffffff; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navblack:link { text-decoration: none; color: #000000; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navblack:visited { text-decoration: none; color: #000000; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navblack:hover { text-decoration: underline; color: #000000; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.titlelink:link { text-decoration: none; color: #004080; }
h1 { font-family: Arial, sans-serif; font-size: 30px; color: #004080;}
h2 { font-family: Arial, sans-serif; font-size: 18px; color: #004080;}
body,p,b,i,em,dt,dd,dl,sl,caption,th,td,tr,u,blink,select,option,form,div,li { font-family: Arial, sans-serif; font-size: 12px; }
#mainDiv {
width: 975px;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px
}
</style>
</head>
<body><p>
<h1 align="center"><a class="titlelink" href="index.html">St Peter's Church, Marsh Baldon Refurbishment Project</a></h1></p>
<div id="mainDiv">
<div style="width: 150px; float: left">
<table align="left" bgcolor="#8080c0" border="0" cellpadding="3" cellspacing="1" style="width: 150px">
<tbody>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="index.html">Home</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="our_community.html">Our community</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="plans.html">Plans</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="fundraising_and_information.html">Fundraising and information</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="fundraising_so_far.html">Fundraising so far</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="statement_of_need.html">Statement of need</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="how_to_give.html">How to give</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="progress_so_far.html">Progress so far</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="gallery.html">Gallery</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="information_about_micklethwaite.html">Information about Micklethwaite</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="plans.html">Plans</a></td>
</tr>
</tbody>
</table>
</div>
<div style="float: left; padding-left: 10">
some text
</div>
</div>
</body>
</html>
筹款和信息页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>St Peter's Church, Marsh Baldon Refurbishment Project</title>
<meta content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)" name="GENERATOR" />
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type" />
<style type="text/css">a.navwhite:link { text-decoration: none; color: #ffffff; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navwhite:visited { text-decoration: none; color: #ffffff; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navwhite:hover { text-decoration: underline; color: #ffffff; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navblack:link { text-decoration: none; color: #000000; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navblack:visited { text-decoration: none; color: #000000; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.navblack:hover { text-decoration: underline; color: #000000; font-family: Verdana, Arial, sans-serif; font-size: 10px; font-weight: bold; }
a.titlelink:link { text-decoration: none; color: #004080; }
h1 { font-family: Arial, sans-serif; font-size: 30px; color: #004080;}
h2 { font-family: Arial, sans-serif; font-size: 18px; color: #004080;}
body,p,b,i,em,dt,dd,dl,sl,caption,th,td,tr,u,blink,select,option,form,div,li { font-family: Arial, sans-serif; font-size: 12px; }
#mainDiv {
width: 975px;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px
}
</style>
</head>
<body><p>
<h1 align="center"><a class="titlelink" href="index.html">St Peter's Church, Marsh Baldon Refurbishment Project</a></h1></p>
<div id="mainDiv">
<div style="width: 150px; float: left">
<table align="left" bgcolor="#8080c0" border="0" cellpadding="3" cellspacing="1" style="width: 150px">
<tbody>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="index.html">Home</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="our_community.html">Our community</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="plans.html">Plans</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="fundraising_and_information.html">Fundraising and information</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="fundraising_so_far.html">Fundraising so far</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="statement_of_need.html">Statement of need</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="how_to_give.html">How to give</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="progress_so_far.html">Progress so far</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="gallery.html">Gallery</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="information_about_micklethwaite.html">Information about Micklethwaite</a></td>
</tr>
<tr>
<td bgcolor="#004080"><a class="navwhite" href="plans.html">Plans</a></td>
</tr>
</tbody>
</table>
</div>
<div style="float: left; padding-left: 10">
<img src="images/booklet page 1.jpg" width="785" height="1111" alt=""/><br>
<img src="images/booklet page 2.jpg" width="785" height="1111" alt=""/>
</div>
</body>
</html>
答案 0 :(得分：0)
在网络中使用像素创建网站并不合适，您可以使用百分比或视口单元查看此链接以获取更多信息：CSS Units
关于图像检查HTML元素的顺序如果图像在之前出现之前等等。
绝对定位不会计算位置的任何元素，根据具体情况使用。
一旦您检查过您可以通过各种方式将图片放入您的网站，使用 img标记或广告 iv with background ，在我看来div更可控，所以你制作一个div，之后你将下一个 css 添加到它的类中：
.myDiv{
background-image: url("myurl/test.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 10vh;
height: 10vh;
}
现在，您可以通过添加边距：
来操纵图像的位置.myDiv{
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
在知道您要放置图片的位置后，您可以考虑使用媒体查询，这用于响应式设计（In css）：
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
当屏幕尺寸发生变化时，可以为项目分配不同的值或大小等。您可以在此处找到更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- 因为它似乎你不是从零开始工作，因此你正在使用网站的旧代码和其他人写的。 我建议您制作自己的代码并使用现代编辑器，例如Atom