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

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;

}

idk尝试什么，因为im对CSS没用

Answer 1

这是CSS网格的完美用例您所提供的信息很少，我只能为您提供很多帮助，但是我相信您可以根据自己的需求定制我的解决方案#container {&nbsp; display: inline-grid;&nbsp; grid-template-columns: repeat(4, 1fr);&nbsp; grid-template-rows: repeat(2, max-content);&nbsp; align-items: center;&nbsp; align-content: center;&nbsp; justify-content: center;}#container > button {&nbsp; width: 30px;&nbsp; height: 30px;}#timer {&nbsp; grid-column: 1 / span 4;&nbsp; grid-row: 2;&nbsp; text-align: center;&nbsp; font-size: 30px;}<div id="container">&nbsp; <button class="btnPlay">▶️</button>&nbsp; <button class="btnPause">⏸️</button>&nbsp; <button class="btnStop">⏹️</button>&nbsp; <button class="btnResume">⏯️</button>&nbsp; <div id="timer">30:00</div></div>