首页 新闻 搜索 专区 学院

CSS左右布局问题请教

0
[已解决问题] 解决于 2007-12-22 20:54
如下是一个左右布局,如何让sidebar宽度是200px,mainbody自动把右边的屏幕区域填满呀,而且把浏览器的窗口缩小后,不会让mainbody跑到sidebar下面,我现在是在mainbody上加了个left的绝对布局才让mainbody不会跑到sidebar下面。<br>&lt;style&gt;<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>&lt;/style&gt;<br>&lt;div id="pagebody"&gt;<br>&nbsp;&nbsp; &nbsp;&lt;!--页面主体--&gt;<br>&nbsp;&nbsp; &nbsp;&lt;div id="sidebar"&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;!--侧边栏--&gt;<br>&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br>&nbsp;&nbsp; &nbsp;&lt;div id="mainbody"&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;!--主体内容--&gt;<br>&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br>&lt;/div&gt;
问题补充: @扑街仔 ie6不支持min-width的。 如果一个两列的宽度为100%表格,左边的单元格设置为200px,右边的单元格会自动把占满。 而两个高度一样div如果想弄成一行模仿左右布局,左边的一个设置为固定像素,右边那个就不会自动填充剩下的屏幕区域,右边那个必须也设置一个固定像素宽,而且你把浏览器整个窗口缩小后,本来是左右的两个div会变成上下布局了,错位了。
蛙蛙王子的主页 蛙蛙王子 | 菜鸟二级 | 园豆:265
提问于:2007-12-22 10:07
< >
分享
最佳答案
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;
丁学 | 专家六级 |园豆:18530 | 2007-12-22 20:38
其他回答(1)
0
不是很懂你的 意思 你说想mainbody把右边填满为什么还要设置它的width? #pagebody中你设置了min-height:300px; 你是想设置min-width:300px吧? 问题应该出现的就在这里. 把这里改了.再把#mainbody中设置的绝对定位代码和width去掉, 如果没有猜错的.是你想要的效果吧. 在IE7和FF下测试通过
扑街仔 | 园豆:210 (菜鸟二级) | 2007-12-22 15:23
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册