明辉手游网中心:是一个免费提供流行视频软件教程、在线学习分享的学习平台!

让div宽度自适应教学

[摘要]我们都知道,在css布局时,在不对div设置任何样式时,div独占一行默认CSS样式为100%宽度,那么我们这次教大家怎么实现DIV宽度自适应但宽度从零随内容增加而宽度增加?而非一开始即宽度全屏100%宽的方法解决方法:使用CSS float即可让div默认100%自适应宽度变成宽从零开始自适应宽...
我们都知道,在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标签即可实现。

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!


相关阅读:

怎样不使用CSS改变鼠标悬停样式

Js操作DOM对象的流程

调用不同分辨率的css文件方法

以上就是让div宽度自适应教学的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。