一个 css 的样式问题
在一段 HTML 和 CSS 代码中，两张图片无法显示，并且名为 “left” 的元素没有宽度，即使其父元素有宽度，而子元素的 30% 宽度也没有。产生这个问题的原因是什么？
HTML 代码：
@@##@@
登录后复制
CSS 代码：
.store-info { display: flex; /* 省略代码 */}.left { width: 30%; /* 省略代码 */}.right { flex: 70%; /* 省略代码 */}
登录后复制
问题的原因：
立即学习“前端免费学习笔记（深入）”；
这里的问题可能是由于 right 元素使用了不当的 flex 布局。要正确使用 flex，需要为其指定一个宽度，否则它会默认占满父元素剩余的空间。在这种情况下，right 元素可能已经占满了剩余的空间，从而导致 left 元素无法使用其分配的 30% 宽度。
可能的解决方案：
为了解决这个问题，可以为 right 元素指定一个确切的宽度。例如，可以将 flex 属性的值更改为 flex: 0 0 70%。这将使 right 元素占用父元素的 70% 宽度，同时允许 left 元素使用其分配的 30% 宽度。
.right { flex: 0 0 70%;}
登录后复制
通过应用此更改，两张图片应该能够正常显示，并且 left 元素应该具有其指定的宽度。
以上就是为什么 CSS 中的 “left” 元素无法显示宽度，即使其父元素有宽度且子元素设置为 30% 宽度？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2808798.html
