实现这种效果(兼容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:
<dl>
<dt>g leftTitle Long:</dt>
<dd>rightContent<br />rightContentrightContentrightContent<br />rightContentrightContent<br />rightContent<br /><br />...</dd>
</dl>
<dl>
<dt>g leftTitle:</div>
<dd>rightContent rightContent rightContent rightContent</dd>
</dl>
<dl>
<dt>g leftTitle Long Long Long Long:</dt>
<dd>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</dd>
</dl>