可能会遇到这样一种问题：
图片大小是固定死的，其他在这一行的元素可以随着浏览器变化而等比例缩放
比如：我图片大小固定为72px，那么想让后面的宽度自适应屏幕大小。可以用此公式：
width:-webkit-calc(100% - 72px); width:-moz-calc(100% - 72px); width:calc(100% - 72px);
如果换成小屏下不会影响后面的宽度变化：
css中如何在一行计算固定宽度和自适应宽度
2023-04-18
97
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
css中如何在一行计算固定宽度和自适应宽度
目录
相关文章
|
1月前
|
前端开发
JavaScript
容器
|
23天前
|
前端开发
UED
容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
100
34
34
|
16天前
|
前端开发
CSS权重计算
【10月更文挑战第28天】CSS权重计算是CSS样式应用中的一个重要概念，了解和掌握权重计算规则有助于更好地控制页面的样式表现，避免样式冲突和意外的显示效果，从而提高网页开发的效率和质量。
38
9
9
|
23天前
|
前端开发
|
4月前
移动端的打开方式,打开F12之后，就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box； 定宽度为多少就是多少，代码库,移动端
移动端的打开方式,打开F12之后，就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box； 定宽度为多少就是多少，代码库,移动端
76
0
0
|
2月前
|
前端开发
|
4月前
|
前端开发
容器
|
4月前
|
前端开发
容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
40
2
2
|
4月前
|
前端开发
容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
39
2
2
|
4月前
|
前端开发
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效，绝对定位和非绝对定位元素的宽高百分比计算方法的不同
72
1
1