html - 调整浏览器大小时元素丢失位置

Question

我是网页设计的新手，我不知道如何解决以下问题。

当浏览器最大化时，元素处于合适的位置。但是当浏览器重新调整元素大小时，尤其是 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>&nbsp;44 m2: </td><td>&nbsp;&nbsp;</td><td>830,- kr. pr. m2</td>
        </tr>
        <tr>
            <td>45</td><td>–</td><td>&nbsp;80 m2: </td><td>&nbsp;&nbsp;</td><td>780,- kr. pr. m2</td>
        </tr>
        <tr>
            <td>81</td><td>–</td><td>126 m2: </td><td>&nbsp;&nbsp;</td><td>745,- kr. pr. m2</td>
        </tr>
        <tr>
            <td>Over</td><td></td><td> 126 m2: </td><td>&nbsp;&nbsp;</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>

Answer 1

这是因为几乎所有元素都依赖于窗口的大小(通过百分比)来计算它们的位置。因此，更改窗口大小会更改所有元素的位置。

要解决此问题，请尽量不要过多地使用百分比宽度和高度。我个人将容器 div 设置为固定大小(大约 1000 像素)，然后如果我需要使用百分比，它们将基于固定大小，这意味着元素不会全部移动。

编辑:如标记所建议，使用最小宽度:

<div id="container" style="min-width:900px;width:100%">
</div>

如果窗口高于 900px，这将使 div 增长，但会阻止 div 在其下方收缩。或固定大小，因此容器不会缩小或增大:

<div id="container" style="width:1000px">
</div>