Question

我的代码少了。但是，图像高度显示为360x0

.modal-submit {
    .alert-icon {
        width: 100%;
        height: 100%;
        min-height: 100%;
        border: none;
        background: #fff url(https://www.somepage/imagename.png) no-repeat center center;
        background-size: 100px 100px;
    }
}

你可以帮我解决这个问题吗？

Answer 1

.alert-icon设置为.modal-submit的高度。如果没有在modal-submit上设置任何高度，.alert-icon也不会有高度。

＆＃13;

.modal-submit {
  width: 100%;
  height: 200px;
} 

.alert-icon {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: none;
  background: pink;
}

＆＃13;

<div class="modal-submit">
  <h1>content content content</h1>
  <div class="alert-icon">
  </div>
</div>

＆＃13;

Answer 2

尝试将display：block添加到alert-icon

Answer 3

浮动的内容不会影响其容器的高度。该元素不包含任何不浮动的内容（因此没有任何内容阻止容器的高度为0，就像它是空的一样）。

在容器上设置overflow: hidden将通过建立新的容器来避免这种情况块格式化上下文。请参阅包含其他技术的浮点数并包含浮点数的方法，以解释为什么以这种方式设计CSS。

div高度显示为零

3 个答案: