要求:
1.跟随窗体的大小改变,右侧内容自动伸缩.
2.用表格填允右侧内容时,当表格100%时,不可换行.
3.不可隐藏右侧中的内容.
布局CSS如下:
.main{ float:right; margin-right:-200px; width:100%; height:300px; background-color:#ff0000;} .navbar{ float:left; width:200px; height:300px; background-color:#00ff00;} .content{ margin-right:200px; background-color:#0000ff;}
页内容如下:
<div class="main"> <div class="content"> <table style="width:100%;"> <tr> <td> </td> </tr> </table> </div> </div> <div class="navbar"></div>
在IE8下有更好的方法:
.navbar{float:left; width:150px; background-color:#00ff00; height:50px; border:solid 1px #000;} .main{background-color:#0000ff;height:50px;border:solid 1px #000; margin-left:155px}
解决IE6下不兼容问题:
.navbar{float:left;position:absoult;left:0px;top:0px;width:150px;height:50px;}
页内容:
<div class="navbar"></div> <div class="main"> <table style="width:100%"> <tr> <td> </td> </tr> <table> <div>
就上面的网页还有如下方法:
.navbar{float:left;width:150px;height:50px;}
.main{overflow:hidden;zoom:1;height:50px;}
对于以上方法中,IE6下产生的3px bug问题,可按如下方法觖:
第一种方法:
.navbar{margin-right:-3px;}/*IE8/FF不能用*/
第二种方法:
.main{float:left;}
朋友们如有更好的排版方法,望赐教