如何让中间绿色的div根据页面宽度自适应?
发布网友
发布时间：2022-04-20 11:34
共4个回答
懂视网
时间：2022-04-20 15:56
解决方法：
使用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标签即可实现。
相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
怎样不使用CSS改变鼠标悬停样式
Js操作DOM对象的流程
调用不同分辨率的css文件方法
热心网友
时间：2022-04-20 13:04
<div style="flex:0 0 100px;background-color:blue;color:white;">123</div>
<div style="flex:1 0 auto;background-color:green;color:white;">456</div>
<div style="flex:0 0 100px;background-color:blue;color:white;">789</div>
</div>
热心网友
时间：2022-04-20 14:22
<div style="height:40px;background-color:blue;width:100px;float:left;color:white;">123</div>
<div style="height:40px;background-color:green;width:calc(100% - 200px);float:left;color:white;">456</div>
<div style="height:40px;background-color:blue;width:100px;float:left;color:white;">789</div>
</div>
热心网友
时间：2022-04-20 15:56
方法2：在三个DIV外面再包一层DIV，然后给外层DIV一个相对定位，里面的DIV，左右DIV给绝对定位，然后设置固定宽度，中间的DIV100%宽度，然后在中间DIV里面加一个DIV做左右外边距，正好是左右DIV的宽度即可！
方法3：用JS，直接判断浏览器多宽，然后减去左右DIV的宽度，剩下的宽度给中间DIV设置就行了！
方法其实还有很多，告诉你方法的目的在于，自己一定要尝试，下次遇到相似问题就可以慢慢自己解决了！在学习前端的路上，唯有一点点的动手，积累经验！
希望对你有帮助，望采纳！
