html 自动包裹内容,CSS 实现div宽度根据内容自适应

在实际应用中，可能有这样的需求，那就是需要div根据内容进行宽度自适应。有很多开发者可能误以为如果不设定div的宽度就可以实现宽度随内容自适应，其实这是错误的，因为在默认状态下，div的宽度值是百分之百，也就是会占满整个父元素宽度。

代码实例如下:

复制代码代码如下:

脚本之家

.parent{

width:400px;

height:400px;

border:1px solid red;

}

.children{

border:1px solid blue;

height:50px;

}

欢迎来到蚂蚁部落，今天阳光不错！

以上代码可以看出，默认状态下，并不能够实现我们想要的效果。

下面对以上代码进行修改如下:

复制代码代码如下:

脚本之家

.parent{

width:400px;

height:400px;

border:1px solid red;

}

.children{

border:1px solid blue;

height:50px;

display:inline-block;

*display:inline;

*zoom:1;

}

欢迎来到脚本之家，今天阳光不错！

以上代码实现我们想要的效果，并且各浏览器兼容性良好，主要是添加如下核心代码:

复制代码代码如下:

display:inline-block;

*display:inline;

*zoom:1;

当然内联元素不会存在以上麻烦，因为内联元素并不能够设置宽度，只能够随着内容自适应宽度。

以上所述给大家介绍了CSS 实现div宽度根据内容自适应的相关知识，希望对大家有所帮助。

html 自动包裹内容,CSS 实现div宽度根据内容自适应相关推荐

学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法一.行高(line-height)法二.内边距(padding)法三.模拟表格法四.CSS3的transform来实现五:css3的box方法实 ...
CSS控制div宽度最大宽度/高度和最小宽度/高度
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...
css中div中的内容居中
第一种使用table标签(很少用) css代码 /* 使用table包裹要居中的元素,因为table有自适应的设置然后将table居中即可. */ table{ margin: 0px auto; ...
CSS总结div中的内容垂直居中的四种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
css设置textarea宽高,怎么用CSS让textarea宽度为100%? 自适应页面
用户提问如上图所示,目前的回复框太小了,我想全屏,但是CSS离改来改去(在.reply_quick textarea修改的),width:100% 也试了,不行,只有width=567px这样; 用 ...
CSS 背景图片宽度100% 高度自适应
.bg{width: 100%;height: 100%;background-image: url("../../public/img/bg.png");background-s ...
html设置内容居中,设置div内容居中
接下来要准备的是准备一个div用来放内容了,这里为了显示特意给div设置了边框. 接下来就在div中添加内容,如下图所示,运行后会发现内容偏向于左上角. 给div设置水平居中,如下图所示. 如何设置d ...
css纵向滚动条自适应,纯css实现完美决对居中自动滚动条根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条。.doc...
纯css实现完美决对居中自动滚动条根据内容宽度.高度自适应,垂直水平居中,自动出现滚动条..doc 还剩 3页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内 ...

html 自动包裹内容,CSS 实现div宽度根据内容自适应

html 自动包裹内容,CSS 实现div宽度根据内容自适应相关推荐

最新文章

热门文章