DIV+CSS 布局一行兩列,左列固定寬度,右列自適應寬度

.divGlobal,.DivTop,.DivBottom{min-width: 760px;width: expression(document.body.clientWidth < 760? "760px": "100%" )/*最小寬度設定*/;width:100%;}<br /> .divGlobal{/*border:1px solid #ff0000;*/}<br />.DivTop,.DivBottom,.DivMainLeft,.DivMainRight {border:1px solid #ff0000;}<br />.DivBottom {clear: both;}<br />.DivMainLeft{float:left;}<br />.DivMainRight{margin-left:210px;}<br />.DivFiexWidth{width:200px;}<br />.DivMainRightChild{}<br />.clear{clear: both;}<br /> ul.ul1{margin:0px;margin-left:0px;padding-left:0px; /*fiexfox裡需要設定此項,否則UR和DIV間會有空白*/}<br /> li.li1{margin-left:0px;list-style-type:none;}<br /> li.liBg {margin-left:0px;background-color:#ffDD00;list-style-type:none;padding:5px;} 

 

<div class="DivTop"><br />top<br /></div><br /><div class="divGlobal"><br /> <div class="DivMainLeft"><br /> <div class="DivFiexWidth"><br /> <ul class="ul1"><br /> <li class ="liBg">左邊固定寬度</li><br /> <li class ="li1"></li><br /> </ul><br /> </div><br /> <div class="DivFiexWidth"> </div><br /> </div><br /> <div class="DivMainRight"><br /> <div class="DivMainRightChild" ><br /> <ul class="ul1"><br /> <li class ="liBg">右邊寬度自適應.</li><br /> <li class ="li1"></li><br /> </ul><br /> </div><br /> <div class="DivMainRightChild" > </div><br /> </div><br /> </div><br /><div class="DivBottom"><br />DIV+CSS 布局一行兩列,左列固定寬度,右列自適應寬度<br /></div>