如何实现时分秒倒计时布局？拒绝relative/absolute定位方案

嘿，完全理解你不想用position: relative/absolute来实现倒计时布局的想法——定位方案不仅容易出现布局偏移，后续维护也麻烦。用现代CSS的Flexbox或Grid才是更优雅的选择，下面给你详细的实现方案：

首先先优化下HTML结构，把每个数字和对应的单位包装成独立的小组，这样布局逻辑更清晰，也方便后续维护：

<div class="offer-countdown">
  <!-- 小时单元 -->
  <div class="countdown-unit">
    <div class="ct-background-element">23</div>
    <span class="unit">h</span>
  </div>
  <!-- 分钟单元 -->
  <div class="countdown-unit">
    <div class="ct-background-element">55</div>
    <span class="unit">m</span>
  </div>
  <!-- 秒单元 -->
  <div class="countdown-unit">
    <div class="ct-background-element">12</div>
    <span class="unit">s</span>
  </div>
</div>

然后用Flexbox写CSS，完全不需要定位：

.offer-countdown {
  /* 让三个倒计时单元横向排列 */
  display: flex;
  gap: 1rem; /* 单元之间的间距，你可以根据需求调整 */
  align-items: center; /* 垂直方向居中对齐，让整体更整齐 */
}

.countdown-unit {
  /* 每个单元内部，数字在上、单位在下，居中对齐 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 数字的背景样式，你可以替换成自己的设计 */
.ct-background-element {
  padding: 0.5rem 1rem;
  background-color: #222;
  color: #fff;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: bold;
}

.unit {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: #666;
}

这样最终呈现的效果就是：

23   55   12
 h    m    s

如果你想要单位和数字同行（比如23h 55m 12s），只需要修改.countdown-unit的flex-direction为row，再调整下间距就行：

.countdown-unit {
  flex-direction: row;
  gap: 0.3rem;
  align-items: baseline; /* 让数字和单位基线对齐，视觉更协调 */
}

如果你更喜欢Grid的布局方式，代码会更简洁，同样不需要定位：

<!-- HTML结构和上面完全一致 -->
<div class="offer-countdown">
  <div class="countdown-unit">
    <div class="ct-background-element">23</div>
    <span class="unit">h</span>
  </div>
  <div class="countdown-unit">
    <div class="ct-background-element">55</div>
    <span class="unit">m</span>
  </div>
  <div class="countdown-unit">
    <div class="ct-background-element">12</div>
    <span class="unit">s</span>
  </div>
</div>

对应的CSS：

.offer-countdown {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 三列，宽度自适应内容 */
  gap: 1rem;
}

.countdown-unit {
  display: grid;
  place-items: center; /* 内部元素水平垂直居中，一步到位 */
}

/* 数字和单位的样式和Flexbox版一致 */
.ct-background-element {
  padding: 0.5rem 1rem;
  background-color: #222;
  color: #fff;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: bold;
}

.unit {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: #666;
}

这两种方案都完全规避了定位的使用，布局灵活度更高，后续要改响应式也很简单——比如移动端想改成垂直排列，只需要给.offer-countdown加个媒体查询，把flex-direction改成column或者grid-template-columns改成1fr就行。

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