Question

我有一个倒计时（用js制作，但是对于这个例子，我将有3个数字），我想像这样构造它：

23 55 12

h m s

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

我的HTML代码：

＆＃13;

<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>

＆＃13;

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

我认为我们应该使用正确的工具来解决正确的问题。如果您需要类似网格的布局，则需要grid。在我看来，使用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>

在3个div下放置3个div

2 个答案: