如何将图标固定到不同高度垂直flexbox栏顶部且适配响应式布局

问题根源 #

你当前的图标容器与柱状条容器是两个独立的排版层级，依靠手动设置固定padding、百分比偏移实现的对齐，在窗口尺寸变化时，两个容器的排版逻辑不统一，必然会出现错位。

解决思路 #

将每个奖项图标和对应的柱状条绑定在同一个父容器内排版，无需手动计算偏移量，天然保持对齐关系，响应式切换也不会出现位置偏移。

修改后代码 #

HTML

<div class="outer-container">
  <!-- 第二名栏 -->
  <div class="bar-container">
    <div class="prizeimage2">
      <img src={prizeTwo} alt="2ndprizeicon"/>
    </div>
    <div class="item item1">
      <p className="hourstext">28<br></br> hrs</p>
    </div>
  </div>
  <!-- 第一名栏 -->
  <div class="bar-container">
    <div class="prizeimage1">
      <img src={prizeOne} alt="1stprizeicon"/>
    </div>
    <div class="item item2">
      <p className="hourstext">25<br></br> hrs</p>
    </div>
  </div>
  <!-- 第三名栏 -->
  <div class="bar-container">
    <div class="prizeimage3">
      <img src={prizeThree} alt="3rdprizeicon"/>
    </div>
    <div class="item item3">
      <p className="hourstext">30<br></br> hrs</p>
    </div>
  </div>
</div>

CSS

.outer-container {
    position: absolute;
    width: 100%;
    height: 70%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* 调整柱状条之间的间距，替代原来的item margin-left */
    gap: 10px;
    background: #162983;
}

.bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 调整图标和柱状条顶部的间距 */
    gap: 4px;
}

.item { 
    width: 75px;
    background: #8C9CE7; 
}

.item1 {
    height: 35%;
}

.item2 {
    height: 45%;
} 

.item3 {
    height: 20%;
}

/* 原prize、prizeimage相关的偏移样式全部删除即可 */

修改后每个图标和对应柱状条是绑定的排版单元，不管窗口尺寸如何变化，都会保持图标在柱状条顶部的相对位置。

内容的提问来源于stack exchange，提问作者Vishal K.