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和液体布局。对这些条款中的一些谷歌搜索将为您提供一些宝贵的学习资源 - 并且，随时可以提出您可能在此处提出的任何其他问题 - 我将尝试回复以根据需要调整示例以使您完全了解你正在寻找。

希望它有所帮助！

特洛伊

容器不会停止包装

1 个答案: