将3个Divs放在3个Divs下

Question

我有一个倒计时(使用JS制造，但对于此示例，我将有3个数字(，我想这样构建它：

23 55 12

h m s

我该怎么做？我在许多人使用position:relative和position:absolute的其他帖子中看到了，但我认为这不是最好的解决方案。

我的HTML代码：

<div class="offer-countdown">
  <div class="ct-background">
    <div class="ct-background-element">
      23
    </div>
    <div>hours</div>
    <div class="ct-background-element">
      55
    </div>
    <div>minutes</div>
    <div class="ct-background-element">
      12
    </div>
    <div>seconds</div>
  </div>

Answer 1

您可以简单地使用 flexbox ：

.ct-background {
  display: flex;
}
.ct-background-element {
  display: flex; /* displays flex-items (children) inline by default */
  flex-direction: column; /* stacks them vertically */
  align-items: center; /* makes them horizontally centered */
  margin: 0 5px; /* e.g. */
}

<div class="offer-countdown">
  <div class="ct-background">
    <div class="ct-background-element">23 <span>h</span></div>
    <div class="ct-background-element">55 <span>m</span></div>  
    <div class="ct-background-element">12 <span>s</span></div>
  </div>
</div>

Answer 2

我相信我们应该将正确的工具用于正确的问题。如果您需要类似网格的布局，则需要网格。在我看来，使用flexbox列表是没有意义的。

.ct-background {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
}

<div class="offer-countdown">
  <div class="ct-background">
    <div class="ct-background-element">
      23
    </div>
    <div>hours</div>
    <div class="ct-background-element">
      55
    </div>
    <div>minutes</div>
    <div class="ct-background-element">
      12
    </div>
    <div>seconds</div>
  </div>