集装箱不会停止包装

Question

我目前正在设计一个网站，但我所有的集装箱都包装在较小的屏幕上。我已经尝试了所有我知道如何去做的事情，但我没有修好它。

这里是我的CSS代码：

body { 
    background: url("../img/bg_main.jpg") no-repeat top center; 
} 
#ani2 { 
    position: absolute; 
    width: 43px; 
    height: 66px; 
    margin: 0 auto; 
    left: 56%; 
    top: -1%; 
    background-color: transparent; 
    z-index: 1; 
} 
#logimg1 { 
    position: absolute; 
    width: 250px; 
    height: 25px; 
    text-align: center; 
    top: 0%; 
    left: 0%; 
    padding-top: 0px; 
    display: block; 
    font-size: 13px; 
    font-family:"Segoe UI Light", "Myriad Pro", Tahoma, Arial, sans-serif; 
    z-index: 1; 
} 
#ani1 { 
    position: absolute; 
    width: 43px; 
    height: 66px; 
    margin: 0 auto; 
    left: 35.3%; 
    top: -1%; 
    background-color: transparent; 
    z-index: 1; 
} 
#logo { 
    width: 251px; 
    height: 107px; 
    background: transparent url(../img/plogoW.png) no-repeat top center; 
    margin: 0 auto; 
    padding-top: 0px; 
    display: block; 
    text-indent: -9999px; 
    cursor: pointer; 
} 
#menu { 
    width: 700px; 
    height: 20px; 
    border-radius: 4px; 
    text-align: center; 
    background-color: #FFD900; 
    margin: 0 auto; 
    padding-top: 0px; 
    display: block; 
    font-size: 13px; 
    font-family:"Segoe UI Light", "Myriad Pro", Tahoma, Arial, sans-serif; 
} 
#menu a { 
    text-decoration: none; 
} 
#menu a:link { 
    color:black; 
} 
#menu a:visited { 
    color:black; 
} 
#menu a:hover { 
    color:#134896; 
} 
#menu a:active { 
    color:black; 
} 
#container { 
    overflow: visible; 
    position: absolute; 
    width: 400px; 
    height: 408px; 
    border-radius: 4px; 
    background-color: #FFFFFF; 
    left: 25.75%; 
    top: 22%; 
    padding-top: 0px; 
    display: block; 
    font-size: 13px; 
    font-family:"Segoe UI", "Myriad Pro", Tahoma, Arial, sans-serif; 
    z-index: 1; 
} 
#login { 
    overflow: visible; 
    position: absolute; 
    width: 250px; 
    height: 200px; 
    border-radius: 4px; 
    background-color: #FFFFFF; 
    left: 65.22%; 
    top: 22%; 
    margin: 0 auto; 
    padding-top: 0px; 
    display: block; 
    font-size: 13px; 
    font-family:"Segoe UI Light", "Myriad Pro", Tahoma, Arial, sans-serif; 
    z-index: 1; 
} 
.centered { 
    text-align: center; 
} 
#eemenu { 
    overflow: visible; 
    position: absolute; 
    width: 250px; 
    height: 200px; 
    border-radius: 4px; 
    background-color: #FFFFFF; 
    left: 65.22%; 
    top: 52%; 
    padding-top: 0px; 
    display: block; 
    font-size: 13px; 
    font-family:"Segoe UI Light", "Myriad Pro", Tahoma, Arial, sans-serif; 
    z-index: 1; 
    white-space:nowrap; 
} 
.sep { 
    height: 1px; 
    width: 200px; 
    background: #0093FE; 
    margin: 0 auto; 
} 
#loginstat { 
    overflow: visible; 
    text-align:center; 
    font-family:"Segoe UI", "Myriad Pro", Tahoma, Arial, sans-serif; 
    white-space:nowrap; 
} 
#web { 
    min-width:900px; 
} 

我的HTML：

<div id="web"> 
    <div id="topcontainer"> 
     <div id="imga"> 
      <div id="ani1"> 
       <img src="img/3__.gif"></img> 
      </div> 
      <div id="ani2"> 
       <img src="img/2_.gif"></img> 
      </div> 
     </div> 
     <div id="logo"></div> 
     <div id="menu">Home</div> 
    </div> 
    <div id="container">ContentPlaceholder</div> 
    <div id="login"> 
     <img src="img/bar.png"> 
     <div id="logimg1">Status</div> 
     </img> 
     <br /> 
     <div id="loginstat">Logged in as _________.</div> 
    </div> 
    <div id="eemenu"> 
     <div class="centered">Links</div> 
     <div class="sep"></div> 
    </div> 
</div> 

快乐的任何建议！

Answer 1

我不确定 - 因为有点难以确定你在找什么......但是我的猜测基于你的HTML/CSS是你试图完成这样的事情：

http://jsfiddle.net/TroyAlford/QArPM/3/

http://jsfiddle.net/TroyAlford/QArPM/4/

http://jsfiddle.net/TroyAlford/QArPM/5/<-- Updated based on comments/clarification

如果准确，问题在于你正在做一些非常糟糕的目标块形式和绝对定位。我继续清理所有的代码，将你的CSS类组合成更多的DRY（不要重复自己）表单 - 并以700px的最小宽度布置网站（这似乎是你要去的地方对于）。

一般情况下 - 避免做你正在做的绝对定位的东西z-index。它几乎总是可怕的布局，并成为维修的噩梦。

取而代之的是，我建议研究盒子模型并学习更多关于block和inline-block元素，float和液体布局的知识。根据这些条款进行的几次谷歌搜索将为您提供一些宝贵的资源供您学习 - 并随时提出您可能在此处提出的任何其他问题 - 我会尽量回复，以便根据需要调整示例，以确切了解您正在寻找。

希望它有帮助！

特洛伊