div+css 自适应宽

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