css 使< small>div HTML的每侧为2

5ktev3wc  于 2022-12-20  发布在  其他
关注(0)|答案(1)|浏览(126)

我试图使一个配置文件包含一个进度条的排名系统。我想显示在右边和左边的当前排名=〉下一个排名和中间的进度条。对不起,我的英语在这里的一个例子:
我想要的
这是我得到的My attempt

<div class="card">
<div class="progress userProfileProgress myProfileProgress">
  <h6 class="current_rank">8</h6>
  <div class="determinate userProfileDeterminate" style="width: 0%; background-color: #00d871;"></div>
  <h6 class="next_rank">7</h6>
</div>
</div>
.myProfileProgress {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "current_rank MyProfileProgress next_rank";
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 17px;
  margin-right: 17px;
}

.current_rank {
  grid-area: current_rank;
}

.MyProfileProgress {
  grid-area: MyProfileProgress;
}

.next_rank {
  grid-area: next_rank;
}

.card .myProfileProgress {
  background-color: var(--color-dark-variant);
  position: relative;
  top: 15px;
}

.card .userProfileProgress, .userProfileDeterminate {
  height: 7px;
  border-radius: 5px;
}

.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #acece6;
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden;
}
ma8fv8wu

ma8fv8wu1#

.myProfileProgress {
  display: grid;
  grid-template-columns: 10% 1fr 10%;
  grid-template-rows: 1fr;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 17px;
  margin-right: 17px;
  align-items: center;
}

.current_rank {
  grid-area: 1 / 1 / 2 / 2;
  background-color: red;
  width: 100%;
  height: 100%;
}

.progress {
  grid-area: 1 / 2 / 2 / 3;
  background-color: grey;
  position: relative;
  width: 100%;
  height: 100%;
}

.next_rank {
  grid-area: 1 / 3 / 2 / 4;
  background-color: red;
  width: 100%;
  height: 100%;
}

.progress-inside {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: blue;
}
<div class="myProfileProgress">
  <div class="current_rank">
    <h6>8</h6>
  </div>
  <div class="progress">
    <div class="progress-inside">

    </div>
  </div>
  <div class="next_rank">
    <h6>11</h6>
  </div>
</div>

简化了一个,但您可以在其上应用任何CSS
prodress-inside是进度条的长度

相关问题