Я хочу кнопку над окном со временем

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 сеток

Имея небольшую информацию, которую вы предоставили, я могу вам только очень помочь, но я уверен, что вы можете настроить мое решение под свои нужды

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