html - 容器不会停止包装

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

如果准确的话，问题在于您进行了一些针对性极差的 block 样式和绝对定位。我继续清理所有代码，将您的 CSS 类组合成更多的 DRY(不要重复自己)形式 - 并以 700px 的最小宽度布置网站(这似乎是您要去的为)。

通常 - 避免执行 z-index你正在做的绝对定位。这对于布局来说几乎总是很糟糕，并且成为维护的噩梦。

相反，我建议研究盒子模型并了解更多关于 block 的信息和 inline-block元素，float , 和流式布局。对这些术语中的任何一个进行一些谷歌搜索将为您提供一些宝贵的研究资源 - 并且，请随时提出您可能在这里遇到的任何其他问题 - 我会尝试回复以根据需要调整示例以使您准确地了解什么你正在寻找。

希望对您有所帮助!

特洛伊