Question

我的div有问题，彼此重叠，两者之间没有空格。我尝试过文本对齐中心，在div之间移除和添加空格，设置边距，似乎没有任何效果。我只需要将这些物品分开。任何帮助表示赞赏。

以下是一个示例小提琴：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;
}

编辑：问题是位置：绝对，但是删除它会导致我的背景高度略有增加。我认为这是由于我在底部的56.25％填充，但我需要这样做。无论如何都有两种方式吗？

Edit2：更新了答案的小提琴。我通过添加另一个容器来增加身高。

Answer 1

由于position: absolute;

，您有重叠

此外，id为unique identifier，如果您需要为多个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 {
    ...
}

Answer 2

删除子元素的绝对定位将允许它们按预期显示内联。此外，如上所述，仅使用唯一元素的id属性，使用类来重复元素，如下例所示。

＆＃13;

#timer-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  display: table;
  background-color: black;
}
.timermode {
  width: 30%;
  font-family: "Avenir-Light";
  font-size: 40px;
  color: white;
  vertical-align: top;
  display: inline-block;
}
.timercontrol {
  display: inline-block;
  font-size: 40px;
  font-family: "Avenir-Light";
  color: white;
}

＆＃13;

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

＆＃13;

Answer 3

我是一个年轻有抱负的程序员，所以我的回答可能对你有帮助。我认为这是因为绝对的位置。我在JSFiddel中编辑你的代码并注意到当我删除绝对样式时，它根据它们的相对位置定位所有元素。希望能帮助到你。快乐的编码。

使用内联块的Div是重叠的

3 个答案: