html - 试图制作一个内容不会相互重叠的网页

Question

我想要一个网页，所以在不同的屏幕分辨率下，网页内容的侧面有一个滚动条，而不是彼此重叠。这就是我的 CSS

 @charset "utf-8";
/* CSS Document */

body {
    overflow:auto;
    font-weight:light;
    font-family:Andale Mono, "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:.875em;
    font-weight:lighter;
    text-align:center;
}

a:link {        /* unvisited link */
    color:#000;
    text-decoration:none;
}     
a:visited {     /*  visited link  */
    color:#333;
    text-decoration:none;
} 
a:hover {       /* mouse over link */
    color:#C60;
    text-decoration:none;
}  

div.mainbody {
    margin-top:3%;
    font-size:1em;
    margin-left:auto;
    margin-right:auto;

}

div.textbody {
    height:100%;
    overflow:hidden;
    font-size:.875em;
    margin-top:1%;
    position:absolute;
    margin-left:10%;
    margin-right:10%;
}

div.arrowleft {
    position:absolute;
    top:40%;
    margin-left:25%;
}

div.arrowright {
    position:absolute;
    top:40%;
    margin-right:30%;
    margin-left:70%;
}

div.Footerbar {
    background:#ffffff;
    border-style:dashed;
    border-width:1px;
    border-left-style:none;
    border-right-style:none;
    position:absolute;
    bottom:1%;
    left:0%;
    right:0%;
    padding-bottom:;
    padding-top:;
    font-size:.70em;
    font-weight:lighter;
    text-align:center;
    letter-spacing:.2em;
}

div.footer {
    z-index:2;
    background:#ffffff;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    font-size:9px;
    font-weight:lighter;
    text-align:center;
    letter-spacing:2px; 
}

div.ads {
    position:absolute;
    left:0px;
    right:0px;
    bottom:4%;
    width:728px;
    height:100px;
    margin:auto;
    text-align:center;
}

当我将其中一个页面置于标准显示器分辨率 (1024x768) 时，它会导致元素重叠而不是制作搜索栏。请帮助我

Answer 1

您的问题中没有提供太多细节。这是我做的一个例子，其中 div 不重叠。当您展开窗口内容时，它们将开始水平 float ，当窗口尺寸较小时，它们会垂直下拉。 检查例子http://jsfiddle.net/5zcge/