一种合理而灵活的DL布局

最新推荐文章于 2025-12-15 13:00:22 发布

原创最新推荐文章于 2025-12-15 13:00:22 发布 · 580 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float #ie #html #css

FE 专栏收录该内容

9 篇文章

订阅专栏

实现这种效果（兼容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>