关闭

如何让DIV在内容不固定的情况下宽度刚好显示完内容

标签: divborder测试float浏览器table
1431人阅读 评论(0) 收藏 举报
分类:

一般来说,TABLE默认情况下,TD的宽度会随着内容的变化而变化,而且宽度为内容的实际宽度,这样省去了很多容器自适应宽度的代码。

由于DIV是block级别元素,DIV的默认宽度是100%的浏览器分辨率宽度。所以在DIV里面的内容不够多时,会有一大段留白:

引用代码:

<div style="border: 1px solid #ddd;">测试DIV自适应宽度为正好能显示完内容</div>

输出效果:

测试DIV自适应宽度为正好能显示完内容

由以上的效果我们看到,确实有一大段的留白。那么如何消除这段留白,让DIV刚刚好显示完内容呢?

当然,用float可以解决这个问题。但此次不用float。

引用代码:

<div style="border: 1px solid #ddd; display: inline;">测试DIV自适应宽度为正好能显示完内容</div>

输出效果:

测试DIV自适应宽度为正好能显示完内容

可以看到,效果为正好显示完里面的内容,右边的留白被去掉了。达到了所想要的效果。这里只是将DIV的默认属性改变了一下,由缺省的block改变为inline。

原文地址:http://blog.doyoe.com/article.asp?id=6

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:47875次
    • 积分:990
    • 等级:
    • 排名:千里之外
    • 原创:47篇
    • 转载:0篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论
    飘零雾雨的相关链接