如果有人能帮我解决这个问题,我将不胜感激。
所以,在我的页面中,我有两个部分,一个是向右浮动的,另一个是向左浮动的侧边栏......侧面,但是当我尝试在任何浏览器上运行它时,左 div 很好,但右 div 显示在左 div 下,我彻底搜索了这个但没有找到任何东西。
这是我的 CSS 和 HTML 页面:
主页 :
<div id="page">
<div id="main_sidebar">
<div class="main_top_sidebar">
</div>
<div class="main_body_sidebar">
<p> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT </p>
</div>
<div class="main_bottom_sidebar"></div>
</div>
<div id="main">
<div class="main_top">
<h1> Home </h1>
</div>
<div class="main_body">
<p> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT </p>
</div>
<div class="main_bottom"></div>
</div>
</div>
CSS表:
html, body {
text-align: center;
}
p {text-align: left;}
body {
margin: 0;
padding: 0;
background: #C1C1C1;
background-image:url('background2.png');
text-align: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #F1F5F8;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
html, body {
text-align: center;
}
p {text-align: left;}
#header h1
{
padding-top: 14px;
display:block;
float:left;
line-height:20px;
margin-left:17px;
width:260px;
color:#FFDE00;
text-align:left;
font-size:17px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;
}
#header ul {
padding-left: 100px;
list-style-type: none;
height:21px;
text-align:center;
height:85px;
overflow:hidden;
}
#header ul li , #header ul li a, #header ul li a:visited{
display:block;
float:left;
margin: 0px;
text-align:center;
line-height:72px;
width:133px;
color:#FFFFFF;
font-size:20px;
font-weight:bold;
text-decoration:none;
}
#header ul li a:hover{
color:#CCCCCC;
}
#main
{
margin-top:10px;
margin-bottom:10px;
}
#main .main_top
{
float: right;
height:85px;
width:921px;
background-image:url(main_top.png);
background-repeat:no-repeat;
}
#main .main_body
{
padding-left:0px;
float: right;
height:auto;
width:921px;
background-image:url(main_body.png);
background-repeat:repeat-y;
color:#000000;
padding-bottom:20px;
}
#main .main_bottom
{
float: right;
height:8px;
width:921px;
background-image:url(main_bottom.png);
background-repeat:no-repeat;
}
#main .main_top h1
{
font-size:24px;
line-height:85px;
color:#000000;
padding-left:25px;
background-position:right;
background-repeat:no-repeat;
margin-right:25px;
}
#main .main_body p
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}
#main .main_body ul li
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}
#page
{
margin: 0 auto 0 auto;
margin-top:25px;
display: block;
height:auto;
position: relative;
overflow: hidden;
width: 1151px;
}
#header
{
background-image:url(header.png);
border-radius:15px;
background-repeat:no-repeat;
width:1151px;
height:134px;
}
#float {
width:1151px;
border-radius:15px;
height:170px;
border-color:#FFDE00;
border-style: solid;
border-width:2px ;
background-color:#404040;
color:#ffffff;
}
#float ul li {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px
}
#footer {
float: right;
display:block;
width: 1151px;
height:74px;
background: url(footer.png) no-repeat;
border-radius: 15px;
text-align:right;
font-size:9px;
line-height:75px;
clear:both;
}
#footer p{
font-size: 12px;
text-align:center;
padding-top: 17px;
}
#footer, #footer a, #footer a:visited{
color:#FFDE00;
}
#footer a:hover{
text-decoration:none;
color:#CCCCCC;
}
#main_sidebar
{
margin-top:10px;
margin-bottom:10px;
}
#main_sidebar .main_body_sidebar
{
padding-left:0px;
float: left;
height:auto;
width:230px;
background-image:url(main_body_sidebar.png);
background-repeat:repeat-y;
color:#000000;
padding-bottom:20px;
clear: left;
}
#main_sidebar .main_bottom_sidebar
{
float: left;
height:8px;
width:230px;
background-image:url(main_bottom_sidebar.png);
background-repeat:no-repeat;
clear: left;
}
#main_sidebar .main_top_sidebar
{
float: left;
height:85px;
width:230px;
background-image:url(main_top_sidebar.png);
background-repeat:no-repeat;
clear: left;
}
#main_sidebar .main_top_sidebar h1
{
font-size:24px;
line-height:85px;
color:#000000;
padding-left:25px;
background-position:left;
background-repeat:no-repeat;
margin-right:25px;
}
#main_sidebar .main_body_sidebar p
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}
#main_sidebar .main_body_sidebar ul li
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}