为什么 CSS 样式下两张图片不显示，left 样式没有宽度，虽然父元素有宽度，但只有 30% 子元素有宽度？

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《为什么 CSS 样式下两张图片不显示，left 样式没有宽度，虽然父元素有宽度，但只有 30% 子元素有宽度？》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

css 一个样式问题

问题：

这段代码中，两张图片不显示，且 left 样式没有宽度，尽管父级有宽度，并且子级的 30% 没有。请问是什么问题？

<div class="store-info">
  <div class="left">
    <img :src="img_url" class="left-img" />
  </div>
  <div class="right">
    ...
  </div>
</div>

.store-info {
  display: flex;
  height: 100px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  .left {
    width: 30%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 10px;
    .left-img {
      display: flex;
      width: 100%;
      height: 100%;
    }
  }
  .right {
    flex: 70%;
    ...
  }
}

解答：

猜测问题可能出在 flex 使用不当。请提供 right 的样式，以便进一步排查。

终于介绍完啦！小伙伴们，这篇关于《为什么 CSS 样式下两张图片不显示，left 样式没有宽度，虽然父元素有宽度，但只有 30% 子元素有宽度？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！