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

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 {

  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>