HTML/CSS定价表格布局问题：如何将12x置于R$下方并紧邻价格219

直接用Flex布局就能搞定你要的效果，核心是把价格区域拆成左右两个模块：左侧放垂直排列的R$和12x，右侧放大号的价格数字，让两者底部对齐。

完整代码示例 #

HTML结构

<div class="pricing-card">
  <div class="pricing-price">
    <div class="price-label">
      <span>R$</span>
      <span>12x</span>
    </div>
    <div class="price-amount">219</div>
  </div>
</div>

CSS样式

.pricing-price {
  /* 让左右模块横向排列，底部对齐 */
  display: flex;
  align-items: flex-end;
  gap: 4px; /* 调整左右模块的间距 */
}

.price-label {
  /* 让R$和12x垂直排列 */
  display: flex;
  flex-direction: column;
  font-size: 14px; /* 比价格数字小一圈 */
  color: #666; /* 可选：用浅色调区分主次 */
  line-height: 1.2; /* 控制两行的间距 */
}

.price-amount {
  font-size: 36px; /* 放大价格数字 */
  font-weight: bold;
}

关键逻辑说明 #

• 外层.pricing-price用flex布局+align-items: flex-end，保证左侧的R$和右侧的219底部对齐，匹配目标视觉效果
• 左侧.price-label用flex-direction: column，让R$和12x垂直堆叠，调整line-height可以控制两行的紧凑程度
• 通过字体大小和颜色区分主次，让价格数字更突出

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