CSS左右布局问题请教
0
[已解决问题]
解决于 2007-12-22 20:54
如下是一个左右布局，如何让sidebar宽度是200px，mainbody自动把右边的屏幕区域填满呀，而且把浏览器的窗口缩小后，不会让mainbody跑到sidebar下面，我现在是在mainbody上加了个left的绝对布局才让mainbody不会跑到sidebar下面。<br><style><br>#pagebody {<br>width:98%; /*设定宽度*/<br>margin:8px auto; /*居中*/<br>min-height:300px;<br>padding:0px 5px 0px 5px;<br>}<br>#sidebar {<br>width:200px; /*设定宽度*/<br>text-align:left; /*文字左对齐*/<br>float:left; /*浮动居左*/<br>clear:left; /*不允许左侧存在浮动*/<br>overflow:hidden; /*超出宽度部分隐藏*/<br>border-left: 2px solid #666;<br>border-top: 2px solid #666;<br>border-right: 1px solid #666; <br>text-align: left;<br>vertical-align: top;<br>height:200px;<br>padding:2px;<br>margin-right:10px;<br>}<br>#mainbody <br>{<br>position: absolute;<br>left:230px;<br>width:700px;<br>text-align:left;<br>clear:right; /*不允许右侧存在浮动*/<br>overflow:hidden;<br>height:200px;<br>border-left: 1px solid #666; <br>border-top: 2px solid #666;<br>border-right: 2px solid #666; <br>text-align: left; vertical-align: top;<br>}<br><br></style><br><div id="pagebody"><br> <!--页面主体--><br> <div id="sidebar"><br> <!--侧边栏--><br> </div><br> <div id="mainbody"><br> <!--主体内容--><br> </div><br></div>
问题补充：
@扑街仔
ie6不支持min-width的。
如果一个两列的宽度为100%表格，左边的单元格设置为200px，右边的单元格会自动把占满。
而两个高度一样div如果想弄成一行模仿左右布局，左边的一个设置为固定像素，右边那个就不会自动填充剩下的屏幕区域，右边那个必须也设置一个固定像素宽，而且你把浏览器整个窗口缩小后，本来是左右的两个div会变成上下布局了，错位了。
最佳答案
0
<html>
<head>
<style type="text/css">
#sidebar{width:200px;float:left;background:#69c;}
#mainbody{background:#c96;}
</style>
</head>
<body>
<div id="sidebar">sidebar</div>
<div id="mainbody">mainbody</div>
</body>
</html>
直接这样就可以了吧？
如果在你那上面改，把#mainbody中的position/left/width三个去掉就行了
另外，border的定义考虑组合起来写，比如那个sidebar的border可以写成这样：
border: 2px solid #666;
border-width:2px 1px 0 2px;
其他回答(1)
0
不是很懂你的 意思
你说想mainbody把右边填满为什么还要设置它的width?
#pagebody中你设置了min-height:300px;
你是想设置min-width:300px吧?
问题应该出现的就在这里.
把这里改了.再把#mainbody中设置的绝对定位代码和width去掉,
如果没有猜错的.是你想要的效果吧.
在IE7和FF下测试通过
