简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

让div宽度自适应教学

php中世界最好的语言
发布： 2017-11-29 11:46:18
原创
5651 人浏览过

我们都知道，在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中文网其他相关文章！

相关标签：
宽度 教学
来源：php.cn
上一篇：HTML里无法显示背景颜色的解决方法 下一篇：html与xhtml的区别详解
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
来自于 2024-04-06 21:55:20
0
1
778
MERN stack搜索框和复选框的正则表达式过滤器 我正在尝试通过边做边学来了解MERN堆栈如何协同工作，并且我正在遵循bezcoder的这些教程：Node.js/Express/MongoDb（Github整个代码）和Reactj...
来自于 2024-04-06 14:53:12
0
1
425
我在使用CSS网格时遇到了高度不符合预期的问题，我可能犯了哪些错误？ 我目前正在学习CSS网格，并且被要求通过将其分解为网格来制作这张卡片。附上了我想要制作的网格的图片。实际上有一个更大的网格（在CSS中称为profile-grid），所有这些卡片都...
来自于 2024-04-06 12:52:14
0
1
339
PHP HTTP 请求忽略参数 在开始提问之前，我要提到的是，在离开PHP很长一段时间后，我正在重新学习PHP。请温柔一点。另外，我知道我可以使用像curl这样的库来完成其中一些事情，但我想了解PHP本身是如何工...
来自于 2024-04-05 10:54:48
0
1
3536
如何从设计生成的数据库表填充 HTML 表格 对RubyonRails和devise非常陌生。我目前正在尝试在HTML页面上填写一个表，该表应列出我的数据库(MYSQL)中学生表的所有记录。<tbody><%...
来自于 2024-04-05 09:13:39
0
1
2491
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！