CSS如何实现div宽度根据内容自适应_html/css_WEB-ITnose
程序员文章站
2022-03-19 13:27:31
...
CSS如何实现div宽度根据内容自适应:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
在实际应用中,可能有这样的需求,那就是需要div根据内容进行宽度自适应。有很多开发者可能误以为如果不设定div的宽度就可以实现宽度随内容自适应,其实这是错误的,因为在默认状态下,div的宽度值是百分之百,也就是会占满整个父元素宽度。
代码实例如下:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
在实际应用中,可能有这样的需求,那就是需要div根据内容进行宽度自适应。有很多开发者可能误以为如果不设定div的宽度就可以实现宽度随内容自适应,其实这是错误的,因为在默认状态下,div的宽度值是百分之百,也就是会占满整个父元素宽度。
代码实例如下:
蚂蚁部落 欢迎来到蚂蚁部落,今天阳光不错!
以上代码可以看出,默认状态下,并不能够实现我们想要的效果。
下面对以上代码进行修改如下:
蚂蚁部落 欢迎来到蚂蚁部落,今天阳光不错!
以上代码实现我们想要的效果,并且各浏览器兼容性良好,主要是添加如下核心代码:
display:inline-block; *display:inline; *zoom:1;
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4629
更多内容可以参阅:http://www.softwhy.com/divcss/
上一篇: css悬浮效果阴影实现代码
推荐阅读
-
jquery+div如何实现frameset效果?_html/css_WEB-ITnose
-
二列div宽度自适应_html/css_WEB-ITnose
-
css如何将div实现全屏水平垂直居中_html/css_WEB-ITnose
-
一列div宽度固定、一列div宽度自适应_html/css_WEB-ITnose
-
css判断不同分辨率显示不同宽度布局实现自适应宽度_html/css_WEB-ITnose
-
css如何实现让两个div在同一行排列_html/css_WEB-ITnose
-
求助JS和CSS高手啊,如何实现一个DIV中同时有半透明和完全透明_html/css_WEB-ITnose
-
DIV 列表居中排列 并自适应屏幕宽度的CSS_html/css_WEB-ITnose
-
在HTML中如何实现链接选择?详见内容_html/css_WEB-ITnose
-
求问:HTML网页 如何实现点击上方导航栏,下面内容变动?就是说点击导航栏,只变动页面中间,其他不动_html/css_WEB-ITnose