Question

我正在使用以下html和scs用css构建一个小进度栏（这只是scss，因为我正在使用嵌套）

html：

<div class="first">
  <div class="first__progress-bar-container"/>
  <div class="first__progress-bar"/>
  <div class="first__content-section">
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>  
</div>
<div class="second">more content</div>

scss：

.first {
  position: relative;
  height: 10px;
  width: 1000px;

  &__progress-bar-container {
    position: absolute;
    background: #eee;
    height: 10px;
    width: 100%;
    z-index: 1
  }

  &__progress-bar {
    position: absolute;
    z-index: 2;
    height: 10px;
    background: linear-gradient(to right, red, blue);
    border-radius: 0 5px 5px 0;
    width: 50%;
  }
}

也可以使用this codepen

如果我在浏览器中看到结果，则文本"more content"位于所有.content-section内容的正上方。我预计.second将出现在.content-section之后而不是其顶部。

为什么子元素.content-section没有被评估为父元素.first的高度？

后续问题是，如何使"more content"出现在内容的第一位之后而不是顶部？

Answer 1

首先，我不确定自封闭div是否为有效的html，但它们在代码笔中确实产生了不同的结果。

如果我只是从一开始就删除固定高度，那么它将起作用。

Answer 2

我假设您想将进度栏放在进度栏容器中，所以对标记做了一些更改。如果进度条位于进度条容器内部，则不再需要相对和绝对定位。删除了.first的高度，使.first的大小成为内容的大小。

SCSS：

.first {

  width: 1000px;
  background-color:grey;

  &__progress-bar-container {
    background: #eee;
    height: 10px;
    width: 100%;
  }

  &__progress-bar {

    height: 10px;
    background-image: linear-gradient(to right, red, blue);
    border-radius: 0 5px 5px 0;
    width: 50%;
  }
}

HTML：

<div class="first">
  <div class="first__progress-bar-container">
    <div class="first__progress-bar"></div>
  </div>
  <div class="content-section">
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>  
</div>
<div class="second"> more content</div>

相对定位的元素不会占用其子元素的高度

2 个答案: