我想带时间的方框上方的按钮

Question

我希望按钮位于盒子上方，但我不知道该怎么做，我尝试了许多尝试，但没有用

这样的事情，idk怎么把那些按钮放在上面

这是我的HTML代码

  <div id="clockdiv">
    <div id="time">
      <span class="minutes"></span>
      :
      <span class="seconds"></span>
    </div>
  </div>
  <div>
      <div>
        <img src="imgs/stop.png"  class="btnStop" id="btnStop"/>
      </div>
      <div>
        <img src="imgs/play.png" class="btnPlay"  type="button" id="btnPlay"/>
      </div>
      <div>
        <img src="imgs/pause.png"  class="btnPause"  type="button" id="btnPause"/>
      </div>
      <div>
        <img src="imgs/play.png"  class="btnResume"  type="button" id="btnResume"/>
      </div>
    </div>

</body>
</html>

这是我的CSS

.btnStop {
  width: 30%;
  height: 30%;
  display: none;
}

.btnResume {
  width: 30%;
  height: 30%;
}

.btnPlay {
  width: 30%;
  height: 30%;
}

.btnPause {
  width: 30%;
  height: 30%;
  display: none;
}

我想尝试一下，因为我对CSS没用

Answer 1

这是css grids的完美用例

您所提供的信息很少，我只能为您提供很多帮助，但是我相信您可以根据自己的需求自定义解决方案

#container {
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, max-content);
  align-items: center;
  align-content: center;
  justify-content: center;
}

#container > button {
  width: 30px;
  height: 30px;
}

#timer {
  grid-column: 1 / span 4;
  grid-row: 2;
  text-align: center;
  font-size: 30px;
}

<div id="container">
  <button class="btnPlay">▶️</button>
  <button class="btnPause">⏸️</button>
  <button class="btnStop">⏹️</button>
  <button class="btnResume">⏯️</button>
  <div id="timer">30:00</div>
</div>