<! 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 >