让div宽度自适应教学
程序员文章站
2022-03-20 17:05:47
...
我们都知道,在css布局时,在不对div设置任何样式时,div独占一行默认CSS样式为100%宽度,那么我们这次教大家怎么实现DIV宽度自适应但宽度从零随内容增加而宽度增加?而非一开始即宽度全屏100%宽的方法
解决方法:
使用CSS float即可让div默认100%自适应宽度变成宽从零开始自适应宽度效果。
css实现div宽度从零开始小案例
1、完整HTML+CSS代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>小实例</title> <style> .case{ float:left} </style> </head> <body> <div>未设置float内容一</div> <div>未设置float内容二</div> <div class="case">加float样式的内容三</div> <div class="case">对其加float样式的内容四</div> </body> </html>
关键代码:对div加float浮动样式,让其宽度非100%开始,而是随内容多少而改变,想span初始宽度一样随内容增加而增宽。
小结:
通过css对div设置float去掉了div默认全屏宽度样式,但一般要使用这样的从零开始自适应内容宽度的盒子,又不能使用float浮动样式时,通过我们使用span标签即可实现。
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
Js操作DOM对象的流程
以上就是让div宽度自适应教学的详细内容,更多请关注其它相关文章!
上一篇: GO基础之流程控制语句
推荐阅读
-
echart根据div的宽度变化自适应
-
div或img图片高度随宽度自适应的方法
-
二列div宽度自适应_html/css_WEB-ITnose
-
一列div宽度固定、一列div宽度自适应_html/css_WEB-ITnose
-
让超出DIV宽度范围的文字自动显示省略号...
-
js控制iframe的高度/宽度让其自适应内容_javascript技巧
-
让3个DIV并排,但是要让中间的DIV居中,旁边2个平均分配剩余宽度_html/css_WEB-ITnose
-
让3个DIV并排,但是要让中间的DIV居中,旁边2个平均分配剩余宽度_html/css_WEB-ITnose
-
DIV 列表居中排列 并自适应屏幕宽度的CSS_html/css_WEB-ITnose
-
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用_javascript技巧