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

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

css 一个样式问题

问题:

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

<div class="store-info">
  <div class="left">
    @@##@@
  </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% 子元素有宽度?

以上就是为什么 CSS 样式下两张图片不显示,left 样式没有宽度,虽然父元素有宽度,但只有 30% 子元素有宽度?的详细内容,更多请关注其它相关文章!