一种合理而灵活的DL布局

实现这种效果（兼容IE6/7/8,FF）：

 

CSS:
* { margin:0; padding:0; } /* IE中dd的margin-left默认为30px */
dl { clear:both; overflow:hidden; _zoom:1; margin:2px 0; }
dl dt, dl dd { display:table-cell; padding:5px; }
dl dt { float:left; color:red; background-color:#333; }
dl dd { *float:left; color:#fff; background-color:#666; }

 

html:

   

g leftTitle Long:

   

rightContent
rightContentrightContentrightContent
rightContentrightContent
rightContent

...

   

g leftTitle:

   

rightContent rightContent rightContent rightContent

   

g leftTitle Long Long Long Long:

   

rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent rightContent