我是网页设计的新手，我不知道如何解决以下问题。
当浏览器最大化时，元素处于准确位置。但是当浏览器重新调整元素的大小时，尤其是img元素会向不同的方向移动。
任何提示或建议都非常有用。我想要img站在自己的位置，或者根据调整大小缩小。
以下是website
代码
CSS
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body{
width:100%;
height: 100%;
font-family:GillSansStd-Light;
}
#wrapper {
width:auto;
overflow-x:scroll;
}
#header{ position:fixed;width:100%; height: 15%; background:rgb(218, 208, 185);}
#blank { width:100%; height: 15%; background:white;}
#messen { width:100%; height:85%; background:rgb(218, 208, 185); }
#arrangorerne { width:80%; height:80%; background:rgb(218, 208, 185); padding-top:15%;padding-left:20%; }
#forbesogende { width:80%; height:80%; background:rgb(218, 208, 185); padding-top:15%;padding-left:20%; }
#forudstillere { width:80%; height:100%; background:rgb(218, 208, 185); padding-top:15%;padding-left:20%; }
#tidnsted { width:80%; height:100%; background:rgb(218, 208, 185); padding-top:15%;padding-left:20%; }
#arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent rgb(90, 47, 37) transparent transparent;
}
#menutd{
background-color:rgb(90, 47, 37);
}
#logotd{
position:relative;
background-color:rgb(90, 47, 37);
}
#logo{
position:absolute;
top:-10%;
right:10%;
width:75%;
}
#side_logotd{
position:relative;
}
#side_logo{
position:absolute;
float:left;
left:-170%;
top:0%;
}
#texttd p{
vertical-align: middle;
}
table{
border-collapse:collapse;
}
table.header_table{
width:100%;
position: absolute;
bottom: 0px;
}
table.text_table{
width:100%;
height:100%;
}
table.pricetable{
width: 20%;
margin:10px;
display:none;
border:1px solid black;
}
table.pricetable td{
white-space:nowrap;
padding:5px;
}
h1{
font-family:GillSansStd;
padding-left:10px;
}
h2{
font-family:GillSansStd;
padding-left:10px;
}
p{
font-family:GillSansStd-Light;
margin-top:20px;
line-height:1.5em;
padding-left:10px;
}
a:link {
color: rgb(90, 47, 37);
}
/* visited link */
a:visited {
color: rgb(90, 47, 37);
}
/* mouse over link */
a:hover {
color: rgb(112, 94, 91);
}
/* selected link */
a:active {
color: rgb(112, 94, 91);
}
HTML
<div id="header">
<table class="header_table" border="0">
<tr>
<td width="10%"></td>
<td width="10%"><div id="arrow"></div></td>
<td width="50%" valign="bottom" id="menutd">
<ul id="nav">
<li><a href="#messen">Messen</a></li>
<li><a href="#arrangorerne">Arrangørerne</a></li>
<li><a href="#forbesogende">For besøgende</a></li>
<li><a href="#forudstillere">For udstillere/partnere</a></li>
<li><a href="#">Tid&sted</a></li>
</ul>
</td>
<td width="30%" id="logotd"><img src="img/logo-negativ.png" id="logo"></td>
</tr>
</table>
</div>
<div id="blank"></div>
<div id="messen">
<table class="text_table" border="0">
<tr>
<td width="20%" id="side_logotd"><img src="img/logo-element.png" id="side_logo"></td>
<td width="50%" id="texttd">
<h1>Velkommen til ENTREPRENEUR movement 2015</h1>
<p>ENTREPRENEUR movement 2015 er en kombineret messe og kongress, der for alvor ønsker at sætte iværksætteriet på dagsordenen i Danmark. Det er et professionelt forum, hvor iværksættere og mindre virksomheder bl.a. kan udveksle erfaringer, søge rådgivning og finde finansiering.</p>
<p>Med lanceringen af Entrepreneur movement 2015 ønsker vi et opgør med de forhold, der ligger til grund for, at dansk iværksætterkultur mistrives. Vi ønsker at sætte fokus på udfordringerne for danske iværksættere samt rejse en debat om, hvordan vi kan styrke iværksætteriet i Danmark. På Entrepreneur movement 2015 samler vi derfor de kræfter, der for alvor kan finde løsninger på iværksætterkulturens udfordringer i Danmark. Vi har som mål at forbedre iværksætterkulturen i Danmark, og vi vil gøre op med lønmodtagermentaliteten.</p>
<p>Vi har opstillet følgende konkrete mål for festivalen:<br><br>
<ul style="list-style-position:inside; padding-left:30px;">
<li>Vi vil øge antallet af iværksættere i Danmark</li>
<li>Vi vil få flere danske iværksættere til at lykkedes med deres drøm</li>
<li>Vi vil inspirere flere danske iværksættere til at videreudvikle deres forretning til vækstvirksomheder</li>
</ul>
</p>
</td>
<td width="30%"></td>
</tr>
</table>
</div>
<div id="arrangorerne">
<h1 style="margin-bottom:60px;">Arrangørerne</h1>
<table width="100%">
<tr>
<td width="15%"><img src="img/uffe.jpg"></td>
<td width="30%" valign="top" style="padding-left:1em;padding-right:2em;"><b>Uffe Just</b><br>CEO & FOUNDER - BRAND UNIVERSE<br><br><b>BRAND UNIVERSE</b> arbejder til daglig med at rådgive og hjælpe iværksættere og mindre virksomheder med at lykkes med deres idéer og forretninger. BRAND UNIVERSE har et indgående kendskab til forholdene for iværksættere og mindre virksomheder, samt hvilke udfordringer disse virksomheder kæmper med.
</td>
<td width="15%"><img src="img/jesper.jpg"></td>
<td width="30%" valign="top" style="padding-left:1em;padding-right:1em;"><b>JESPER ÅNDAHL</b><br>CEO - Copenhagen Exhibition Group<br><br><b>Copenhagen Exhibition Group</b> har mere end 20 års erfaring med at arrangere danske og internationale messer og kongresser.</td>
<td width="10%"> </td>
</tr>
</table>
</div>
<div id="forbesogende">
<h1 style="margin-bottom:60px;">For besøgende</h1>
<table width="100%">
<tr>
<td width="80%"></td>
<td width="20%"> </td>
</tr>
</table>
</div>
<div id="forudstillere">
<h1 style="margin-bottom:60px;">For udstillere/partnere</h1>
<p>Skab vækst i din og andres virksomheder. Entrepreneur movement 2015 afholdes for første gang i 2015, og det overordnede mål er at forbedre iværksætterkulturen i Danmark og gøre op med lønmodtagermentaliteten.</p>
<p>Vi ønsker, at udstillerne er:<br><br>
<ul style="list-style-position:inside; padding-left:30px;">
<li>Virksomheder, der arbejder med iværksættere og mindre virksomheder eller ønsker kontakt til denne målgruppe</li>
<li>Kapitalinstitutioner på udkig efter nye investeringsprojekter</li>
<li>Interesse- og brancheorganisationer, der opnår mulighed for at fremme deres synspunkter, sikre synlighed samt vise deres støtte til iværksætteri</li>
</ul>
</p>
<h2><a href="javascript:void(0);" onclick="DisplayText('facts')">Facts om stande</a></h2>
<p id="facts" style="display:none;">Følgende er inkluderet i standpriserne:<br>
2 m høje hvide stofvægge til nabo (tilkøb af yderligere væg: 180 kr. pr. løbende meter (bestilles hos OnFront)). <br>
Strøm (1,8 KW) – et stik med 3 stikdåser<br>
En lampe pr. ca. 5 m2 – 700 W gaslamper (projekttørlys<br>
</p>
<br>
<h2><a href="javascript:void(0);" onclick="DisplayText('standprice')">Standpriser</a></h2>
<table id="standprice" class="pricetable">
<tr>
<td>Op</td><td>til</td> <td> 44 m2: </td><td> </td><td>830,- kr. pr. m2</td>
</tr>
<tr>
<td>45</td><td>–</td><td> 80 m2: </td><td> </td><td>780,- kr. pr. m2</td>
</tr>
<tr>
<td>81</td><td>–</td><td>126 m2: </td><td> </td><td>745,- kr. pr. m2</td>
</tr>
<tr>
<td>Over</td><td></td><td> 126 m2: </td><td> </td><td>705,- kr. pr. m2</td>
</tr>
</table>
<br>
<h2><a href="">Generelle lejebetingelser</a></h2>
<br>
<p><b>Bliv partner</b> kontakt Uffe Just på 70 70 76 70 og book et møde, så vi kan drøfte jeres mulighed for partnerskab.<br>
For information om ledige stande kontakt Jesper Åndahl på 21 27 08 14.
</p>
</div>
<div id="tidnsted">
<h1 style="margin-bottom:60px;">Tid&sted</h1>
<p></p>
</div>
答案 0 :(得分：0)
这是因为几乎所有元素都依赖于窗口的大小（通过百分比）来计算它们的位置。因此，更改窗口大小会改变所有元素的位置。
要解决此问题，请尽量不要使用百分比宽度和高度。我个人将容器div设为固定大小（大约1000px），然后如果我需要使用百分比，它们将基于固定大小，这意味着元素不会全部移动。
编辑：如标记所示，使用min-width：
<div id="container" style="min-width:900px;width:100%">
</div>
如果窗口高于900px，这将使div增长，但会阻止div在其下方收缩。或固定大小，因此容器不会收缩或增长：
<div id="container" style="width:1000px">
</div>
答案 1 :(得分：0)
尝试在容器元素上设置最小宽度。 用以下内容包装内容：
<div id="contentContainer">
// Content goes here....
</div>
<style>
#contentContainer {
min-width:970px;
margin:0 auto; <-- This will center the content, not necessary
}
</style>