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

原创 2007年09月29日 09:07:00

一般来说,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

css自适应宽度 多种方法实现宽度自适应的水平居中

当父元素和子元素都没有定义宽度的情况下实现水平居中:  display:inline-block  可以使用text-align:center和display:inline-block相结合,...
  • iso_wsy
  • iso_wsy
  • 2016年06月16日 17:02
  • 1984

div 固定宽度,固定位置不变

想写一个demo,想固定div在某个位置,改变浏览器宽度的大小不会移动   usually function 不会根据浏览器窗口大小变化 ...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:28
  • 1986

div中的table内容过多时不超出div的范围解决方法

问题描述:     在做界面展示时,table的内容过多,超出div的大小,看着table的边框盖过了div的边框,不美观。 问题解决:     因为页面整体的布局美工都设计好了,使...
  • q383965374
  • q383965374
  • 2015年09月25日 15:30
  • 4355

表格td使用百分比宽度 超出显示省略号,鼠标悬浮显示完整信息。样式设置,难点分析

欢迎来到Altaba的博客 2017年2月20日 大家在前端编写过程中,难免会遇到表格问题,要求不高的话表格相信大家会首选bootstrap里面的样式,响应式的表格大小是最省事的,可是前端工作中难免...
  • Altaba
  • Altaba
  • 2017年02月19日 16:59
  • 2876

【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)

以前在网上看到过,说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实,这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中...
  • Coding_Fox
  • Coding_Fox
  • 2015年09月16日 21:26
  • 3485

js分页显示div内容

js分页显示div内容的方法,对于div内容过高的情况,可以用js控制div分页,不错的分页效果。 例子,js分页显示div内容。         div分页显示_脚本之家_www...
  • vip_linux
  • vip_linux
  • 2014年04月30日 08:00
  • 1535

html固定宽度下拉框内容显示不全问题解决方法

转载出:http://www.cnblogs.com/key/archive/2008/05/17/1201274.html 不少时候在页面中为了布局的需要,下拉列表select的宽度需要设成比较小的...
  • wujin8589
  • wujin8589
  • 2016年05月23日 09:52
  • 1973

div(固定宽度和不固定宽度)居中显示的方法总结

今天我总结一下css实现div居中的方法,有的是固定宽度的,还有的是不固定宽度的。 1.使用自动外边距实现DIV CSS居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将...
  • u010113829
  • u010113829
  • 2015年01月29日 15:39
  • 294

怎么解决div覆盖内容却没覆盖的问题?

一、在上下结构的div布局中,可能出现div覆盖div,但是内容却没有出现覆盖的现象。看看一个示例 1: 2: 3: 4: DIV与DIV覆盖 5: ...
  • u011043843
  • u011043843
  • 2014年09月21日 08:35
  • 1561

bootstrap3自定义popover显示的内容

1、popover.js的内容一般都是写元素里面。如下。 点我弹出/隐藏弹出框 其中title为显示的标题,data-content为显示的内容 2、popover不会自己初始化...
  • ssrrxx111
  • ssrrxx111
  • 2015年07月02日 15:18
  • 12392
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让DIV在内容不固定的情况下宽度刚好显示完内容
举报原因:
原因补充:

(最多只允许输入30个字)