<! 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=gb2312" /> < title > 无标题文档 </ title > < style type ="text/css" > <!-- div {}{ height: 5em; line-height: 5em; text-align: center; margin: 0; padding: 0; } #d1, #d3, #d4, #d6 {}{ float: left; background: #CCC; } #d1 {}{ width: 20%; } #d2 {}{ float: left; width: 30%; background: red; } #d3 {}{ width: 50%; } #d4 {}{ width: 200px; margin-right: -3px; } #d5 {}{ background: red; line-height: 1.4em; text-align: left; } #d6 {}{ width: 300px; float: right; margin-left: -3px; } div[id="d4"] {}{ margin-right: 0 !important; } div[id="d6"] {}{ margin-left: 0 !important; } --> </ style > </ head > < body > < h2 > 百分比宽度 </ h2 > < div id ="d1" > 20% </ div > < div id ="d2" > 30% </ div > < div id ="d3" > 50% </ div > < h2 > 自适应 </ h2 > < div id ="d4" > left:200px </ div > < div id ="d6" > right:300px </ div > < div id ="d5" > 自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应 </ div > </ body > </ html > 在firefox1.5,IE5.5,IE6.0,Oprea8.5下测试通过。