如何使两个div元素处于同一水平？CSS布局对齐问题求助

要实现左侧大字号文本与右侧小字号文本在同一水平线上的效果，用Flex布局就能快速搞定，具体调整如下：

调整后的完整代码 #

CSS 部分 #

.crypto-card {
  /* 核心：用flex实现水平布局+垂直居中 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 可选：给容器设置宽度，避免内容过度拉伸 */
  width: 300px;
}

.crypto-card .value-label{
  font-weight: 500;
  font-size: .8rem;
  /* 去掉原有的width:100%，否则会占满容器挤走另一个div */
}

.crypto-card .value{
  font-size: 1.5rem;
  font-weight: 100;
  /* 移除无效的right/top属性，这俩仅对定位元素生效，原代码没加定位，完全没用 */
}

HTML 部分 #

<div class="crypto-card">
  <div class="value">Ethereum classic</div>
  <div class="value-label"><span class="title">15.29 TH/s</span></div>
</div>

关键调整说明 #

• 给父容器.crypto-card加display: flex：把容器内元素转为水平排列的flex项
• justify-content: space-between：让两个div分别靠向容器左右两端，中间自动留白
• align-items: center：让两个div在垂直方向居中对齐，避免因字号差异导致错位
• 移除.value里的right/top属性：这俩属性仅对设置了position: relative/absolute/fixed的元素生效，原代码没加定位，属于无效设置
• 移除.value-label的width: 100%：块级元素默认占满一行，加100%会把另一个div挤到下一行，flex布局下不需要这个配置

内容的提问来源于stack exchange，提问作者jade2216