提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>兩列寬度自適應</title><style type="text/css">.con{ width:80%; margin:0 auto 10px; border-bottom:2px dashed #333; padding-bottom:10px;}.left,.right{ height:200px; border:1px solid #333; background:#eee;}.left{ width:160px;}.right{ height:400px; background:url(yun_qi_img/logo.gif) no-repeat center center;}.warp{ width:100%; background:#fc3;}/*左側浮動，右側margin-left,IE6,7下在縮小到一定程度右側會下沉,而且有一個 IE6 3px bug*/.con1 .left{ float:left;}.con1 .right{ margin-left:170px; word-break:break-all; _margin-left:167px; /*IE6 3px bug*/}/*左側絕對位置，右側margin-left,此方法有效避免了右側下沉和IE6 3px bug*/.con2{ position:relative;}.con2 .left{ position:absolute; left:0; top:0;}.con2 .right{ margin-left:170px;}/*另外還有網上的一種方法，可能不用確定左側寬度，利用那啥hasLayout原理，不是很明白，但是左側寬度不會計算邊框寬度,在非FF的瀏覽器中寬度過小時會出現右側下沉,而且同樣會有IE6 3px bug*/.con3 .left{ float:left; margin-right:8px; _margin-right:5px; /*IE6 3px bug*/}.con3 .right{ overflow:hidden; word-break:break-all;}</style></head><body><h1>兩列寬度自適應測試</h1><div id="con1" class="con con1" title="左側浮動，右側margin-left,IE6,7下在縮小到一定程度右側會下沉"><div class="left">左側浮動，右側margin-left,IE6,7下在縮小到一定程度右側會下沉,而且有一個 IE6 3px bug</div> <div class="right">Right <div class="warp">測試子項目能否使用width:100%</div> </div></div><div id="con2" class="con con2" title="左側絕對位置，右側margin-left,此方法有效避免了右側下沉和IE6 3px bug"><div class="left">左側絕對位置，右側margin-left,此方法有效避免了右側下沉和IE6 3px bug</div> <div class="right">Right <div class="warp">測試子項目能否使用width:100%</div> </div></div><div id="con3" class="con con3" title="另外還有網上的一種方法，可能不用確定左側寬度，利用那啥hasLayout原理，不是很明白，但是左側寬度不會計算邊框寬度,在非FF的瀏覽器中寬度過小時會出現右側下沉,而且同樣會有IE6 3px bug"><div class="left">另外還有網上的一種方法，可能不用確定左側寬度，利用那啥hasLayout原理，不是很明白，但是左側寬度不會計算邊框寬度,在非FF的瀏覽器中寬度過小時會出現右側下沉,而且同樣會有IE6 3px bug</div> <div class="right">Right <div class="warp">測試子項目能否使用width:100%</div> </div></div></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
