html - 如何将元素并排放置在html页面中

Question

我正在制作一个番茄钟，我想将时钟的控件放在时钟的右侧，而不是当前向下的位置。现在 html/css 代码将控件(添加时间/重新启动等)放在时钟的底部，我想将它放在右边。我怎样才能做到这一点？谢谢html

<div class="container
  <!-- header title -->
  <div class="title primary-text">
      <h1>Pomodoro Clock</h1>      
  </div>
  <!-- clock / timer goes here -->
  <div class="clock">    
    <div class="timer">
      <h2>Session</h2>
      <h1>23:00</h1>     
    </div>    
  </div>
  <!-- this section for controlling clock -->
  <div class="controls">
    <div class="setTime">
       add time                 
    </div>
    <div class="setTime">
       add time                 
    </div>
    <div class="control">
      play/pause
    </div>
    <div class="control">
      reset
    </div>
  </div>
</div>

CSS

body {
  background-color: #545454;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 32px;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.timer {
  margin: 0 0 0 0;
  font-size: 44px;
}

.clock {
  margin: auto;
  text-align: center;
  border: solid black 1px;
  width: 500px;
  height: 200px;
}

.controls {
  margin: auto;
  text-align: center;
  border: solid black 1px;
  width: 100px;
}

Answer 1

您可以对 .clock 和 .controls 使用 inline-block 以对齐它们。但是，由于您希望 .clock 居中，因此您必须添加更多代码。我所做的是创建一个容器 .clockContainer，以便在您的 .controls 上允许 position: absolute。这会将它从流程中移除，并将您的 .clock 居中，同时将您的控件放在它旁边。然后我给你的时钟添加了一些余量，这样这两个元素就不会重叠。然后，您可以使用 top 值来操纵控件的高度位置:

body {
  background-color: #545454;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 32px;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.timer {
  margin: 0 0 0 0;
  font-size: 44px;
}

.clock {
  margin: 0 10px;
  text-align: center;
  border: solid black 1px;
  width: 500px;
  height: 200px;
  display: inline-block;
}

.controls {
  position: absolute;
  text-align: center;
  border: solid black 1px;
  width: 100px;
  display: inline-block;
}

.clockContainer {
  text-align: center;
  position: relative;
}

<div class="container">
  <!-- header title -->
  <div class="title primary-text">
    <h1>Pomodoro Clock</h1>
  </div>
  <!-- clock / timer goes here -->
  <div class="clockContainer">
    <div class="clock">
      <div class="timer">
        <h2>Session</h2>
        <h1>23:00</h1>
      </div>
    </div>
    <!-- this section for controlling clock -->
    <div class="controls">
      <div class="setTime">
        add time
      </div>
      <div class="setTime">
        add time
      </div>
      <div class="control">
        play/pause
      </div>
      <div class="control">
        reset
      </div>
    </div>
  </div>
</div>