水木社区手机版
- 主题:求教大家我的css问题出在哪里？谢谢了。
- 想设计的布局如附件所示。所以简单的说就用了以下文档结构:
<body>
<div id="header"></div>
<div id="wrapper"> /*设置内容的容器*/
<div id="nav"></div> /* 导航菜单 */
<div id="content"> /* 文本内容容器 */
<div id="main"></div> /* 主要内容 */
<div id="sidebar"></div> /* 侧边栏 */
</div>
</div>
</body>
#header和#nav都显示的很正常。
现在的问题就出在了#content与#main, #sidebar的关系上面，我期望的是#main和#sidebar并排排列在#content里面，所以我设计的css是这样的:
#content{
clear:both; /* 跟上面的#nav垂直排列 */
margin: 0 auto;
margin-top: 5px;
text-align: left;
width: 960px;
background: #F6FCFF;
border:solid 1px #89ACA6;
padding: 0px auto;
}
然后#main就让它排在左边，占659px, padding 15px, 总共 (659+15*2) = 689px;
#main{
float: left;
margin: 0px auto;
width: 659px;
padding: 10px 15px;
overflow: hidden;
}
#sidebar排在右边，占270px，border-left为1px，总共为271px;
#sidebar {
float: right;
width:270px;
height:100%;
padding-top:5px;
overflow:hidden;
background:#D9ECFB;
border-left:1px solid #B0C6D9;
}
可是出来的效果却是 #content的容器在上面， #main和#sidebar都排在了下面，#content的外面。效果如附图所示。调了一天了没调好。
请教高手问题出在哪里了？非常感谢。
--
修改:Crochet FROM 211.99.222.*
FROM 211.99.222.*