2列div宽度自适应
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小宽度设置*/;width:100%;}.divGlobal{/*border:1px solid #ff0000;*/}.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}.DivBottom {clear: both;}.DivMainLeft{float:left;}.DivMainRight{margin-left:210px;}.DivFiexWidth{width:200px;}.DivMainRightChild{}.clear{clear: both;}ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox里需要设置此项,否则UR和DIV间会有空白*/}li.li1{margin-left:0px;list-style-type:none;}li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;}</style></HEAD><BODY><script>// alert(document.body.clientWidth);//alert(document.body.clientWidth < 760? "760px": "100%" );</script><div class="DivTop">top</div><div class="divGlobal"> <div class="DivMainLeft"> <div class="DivFiexWidth"> <ul class="ul1"> <li class ="liBg">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> </ul> </div> <div class="DivFiexWidth"> <ul class="ul1"> <li class ="liBg">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> </ul> </div> <!-- <div class="DivFiexWidth"> <ul class="ul1"> <li class ="liBg">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> </ul> </div> <div class="DivFiexWidth"> <ul class="ul1"> <li class ="liBg">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> </ul> </div> <div class="DivFiexWidth"> <ul class="ul1"> <li class ="liBg">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> <li class ="li1">左边固定宽度</li> </ul> </div> --> </div> <div class="DivMainRight"> <div id="l_table"><div class="l_nav"> <input name="input" type="button" class="l_button" value="新建子类别"/> &nbsp;&nbsp; <input name="" type="button" class="l_button" value="合并至"/></div> <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="3" style="text-align:left">未整理的开放类别：</td></tr><tr class="l_trbg"> <td width="20%">开放类别名称</td> <td width="20%">提交时间</td> <td width="20%">操作</td> </tr><tr> <td>笔记本</td> <td>2009-08-08</td> <td><a href="#" >归类至</a></td> </tr><tr> <td>笔记本</td> <td>2009-08-08</td> <td><a href="#" >归类至</a></td></tr><tr> <td>笔记本</td> <td>2009-08-08</td> <td><a href="#" >归类至</a></td></tr><tr> <td>笔记本</td> <td>2009-08-08</td> <td><a href="#" >归类至</a></td></tr><tr> <td>笔记本</td> <td>2009-08-08</td> <td><a href="#" >归类至</a></td></tr><tr> <td>笔记本</td> <td>2009-08-08</td> <td><a href="#" >归类至</a></td></tr><tr> <td>笔记本</td> <td>2009-08-08</td> <td><a href="#" >归类至</a></td></tr><tr> <td>笔记本</td> <td>2009-08-08</td> <td><a href="#" >归类至</a></td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr class="l_trbg"> <td class="tr"><a href="#">首页</a> <a href="#">上一页</a> 1 2 3 4 5 <a href="#">下一页</a> <a href="#">尾页</a> 当前1/10页 跳转到 <input name="" type="text" class="l_text" /> <input name="" type="button" class="l_go" value="GO" /></td></tr></table> </div></div><div class="DivBottom">DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条;firefox ie测试通过.辛苦几天的结果啊平行共三行,中间行分两列,左边固定宽度,右边自适应,并且对行宽度设置了最小值,如果窗口小到最小值以下将出现滚动条,这样一来布局就不会乱了.</div></BODY></HTML>
页:
[1]