DIV+CSS 佈局一行兩列,左列固定寬度,右列自適應寬度;設置最小寬度,窗口小的時候顯示滾動條;Firefox IE測試通過.
辛苦幾天的結果啊
平行共三行,中間行分兩列,左邊固定寬度,右邊自適應,並且對行寬度設置了最小值,如果窗口小到最小值以下將出現滾動條,這樣一來佈局就不會亂了.
下面兩句很重要的.百分比情況下窗口人爲縮小的時候佈局混亂問題就解決了. 
.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小寬度設置*/;width:100%;}.DivMainLeft{float:left;}.DivMainRight{margin-left:210px;}
原來粘貼錯了.現在好了.不好意思.
<!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 class="DivMainRightChild" >
<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>
<li class ="li1">右邊寬度自適應</li>
</ul>
</div>
<div class="DivMainRightChild" >
<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>
<li class ="li1">右邊寬度自適應</li>
</ul>
</div>
<div class="DivMainRightChild" >
<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>
<li class ="li1">右邊寬度自適應</li>
</ul>
</div>
</div>
</div>
<div class="DivBottom">
DIV+CSS 佈局一行兩列,左列固定寬度,右列自適應寬度;設置最小寬度,窗口小的時候顯示滾動條;firefox ie測試通過.
辛苦幾天的結果啊
平行共三行,中間行分兩列,左邊固定寬度,右邊自適應,並且對行寬度設置了最小值,如果窗口小到最小值以下將出現滾動條,這樣一來佈局就不會亂了.
</div>
</BODY>
</HTML>
原文出處：http://www.cnblogs.com/adandelion/archive/2007/05/25/759858.html