寻找CSS样式问题的原因？

最新推荐文章于 2025-08-14 19:06:19 发布

ling_78

最新推荐文章于 2025-08-14 19:06:19 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： css div float class url header

本文链接：https://blog.youkuaiyun.com/ling_78/article/details/586962

作者使用float属性进行CSS布局，但遇到了左右结构不对的问题。左栏未能正确居顶显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我做了一个css控制样式，采用了float的方式，但是我的左右结构突然不对了。

我的源代码如下，不知道那位高手可以指点一下？？
<html>
<head>
<style type="text/css">
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
margin:0px;

}

#banner {
width:776px;
height:60px;
background:url("banner008.gif") #000 no-repeat left top;
padding:0px;
margin-right: auto;
margin-left: auto;
text-align:left;
}
#nav {

background: #ccd2de;
margin-right: auto;
margin-left: auto;
padding: 0px;
}

#nav ul {
    margin:0;
    padding:2px 2px 0;
    list-style:none;
    }

#nav li {
    float:left;
background:url("norm_right.gif") no-repeat right top;
    margin:0;
    padding:0 0 0 ;
    }

#nav a {
    display:block;
text-decoration:none;
    font-weight:bold;
    color:#765;
background:url("norm_left.gif") no-repeat left top;
    padding:5px 15px 4px ;
    }
#contain{
margin-right: auto;
margin-left: auto;
width: 776px;
}
#mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width:616px;
background: #ccd2de;
text-align:left;
}

#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 160px;
text-align:left;
}

#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
}

.text{
display:block;
margin:0px;padding:5px;
font-size:12px;
}
.text ul{
   list-style:none;
   }
</style>
</head>
<body>
<div id="header">
<div id="banner"></div>
</div>
<div id="contain">
<div id="mainbg">
  <div id="right">           －－－－－右边容器
   <div id="nav">           －－－－－右边容器下的一个导航标签
    <ul>
     <li><a href="#">Home</a></li>
     <li ><a href="#">News</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
   </div>
   <br>
    <div class="text">特斯他    </div>
  </div>
  <div id="left">   －－－－－－－－－左边栏目
   <div class="text">
    <ul>
      <li><a href="#">menu</a></li>
      <li ><a href="#">worklog</a></li>
      <li><a href="#">confirm</a></li>
      <li><a href="#">plan</a></li>
      <li><a href="#">tasklist</a></li>
    </ul>
   </div>
  </div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>