html - 使用内联 block 的 div 重叠

Question

我的 div 相互重叠时出现问题，它们之间没有空格。我试过文本居中对齐，删除和添加 div 之间的空白，设置边距，似乎没有任何效果。我只需要将这些元素隔开。感谢您的帮助。

这是一个 fiddle 示例:https://jsfiddle.net/vn6t3nwd/

HTML:

<div id="timer-container">
  <div id="timermode">up</div><div id="timermode">down</div>
  <div id="timercontrol">stop</div>
  <div id="timercontrol">go</div>
</div>

CSS:

#timer-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    display: table;
    background-color: black;
}

#timermode {
    position: absolute;
    width: 30%;
    font-family: "Avenir-Light";
    font-size: 40px;
    color: white;
    vertical-align: top;
    display: inline-block;
}

#timercontrol {
    position: absolute;
    display: inline-block;
    font-size: 40px;
    font-family: "Avenir-Light";
    color: white;
}

编辑:问题是position:absolute，但是删除它会导致我的背景高度略有增加。我认为这是由于底部有 56.25% 的填充，但我需要它。无论如何都要兼顾？

Edit2:用答案更新了 fiddle 。我通过添加另一个容器来避免高度增加。

Answer 1

你有重叠因为 position: absolute;

此外，id 被设为唯一标识符，如果您需要为多个 html 元素使用相同的 css，您应该将其定义为 class

HTML:

<div id="timer-container">
  <div class="timermode">up</div>
  <div class="timermode">down</div>
  <div class="timercontrol">stop</div>
  <div class="timercontrol">go</div>
</div>

CSS:

#timer-container {
    ...
}
.timermode {
    ...
}
.timercontrol {
    ...
}