欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS技巧 >

CSS实现如何让div宽度从零开始自适应

css布局时,在不对div设置任何样式时,div独占一行默认CSS样式为100%宽度(随浏览器宽度改变而改变-宽度全屏)。如何实现DIV宽度自适应但宽度从零随内容增加而宽度增加?而非一开始即宽度全屏100%宽。

解决方法:
使用CSS float即可让div默认100%自适应宽度变成宽从零开始自适应宽度效果。

css实现div宽度从零开始小案例

1、完整HTML+CSS代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>DIVCSS5小实例</title> 
  6. <style> 
  7. .case{ float:left} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div>未设置float内容一</div> 
  12. <div>未设置float内容二</div> 
  13. <div class="case">加float样式的内容三</div> 
  14. <div class="case">对其加float样式的内容四</div> 
  15. </body> 
  16. </html> 

关键代码:对div加float浮动样式,让其宽度非100%开始,而是随内容多少而改变,想span初始宽度一样随内容增加而增宽。

2、div css案例截图

去掉div默认全屏100%宽度效果截图
去掉div默认全屏100%宽度效果截图

小结:
通过css对div设置float去掉了div默认全屏宽度样式,但一般要使用这样的从零开始自适应内容宽度的盒子,又不能使用float浮动样式时,通过我们使用span标签即可实现。

 

如需转载,请注明文章出处和来源网址:/jiqiao/j774.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2015-04-29 15:23 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。