Question

我试图将3个div孩子放在父母div中，他们有确切的位置，孩子们并不关心他们的兄弟姐妹。我试图创建一个简单的例子，但所有的孩子div都与他们的兄弟姐妹有关。

.parent {
  position: relative;
  height: 224px;
  width: 224px;
  border: 32px solid lightgrey;
}

.child {
  position: absolute;
  height: 64px;
  width: 64px;
}

.child1 {
  top: 32px;
  left: 32px;
  background-color: aqua;
}

.child2 {
  top: 32px;
  left: 128px;
  background-color: lightgreen;
}

.child3 {
  width: 160px;
  top: 128px;
  left: 32px;
  background-color: black;
}

<div class="parent">
  <div class="child child1" />
  <div class="child child2" />
  <div class="child child3" />
</div>

我试过看的地方：

Answer 1

使用<div>关闭</div>代码而不是使用单个<div />时，此方法有效。

这是因为在HTML5中，非空标记（如div）末尾的斜杠是forbidden and ignored。所以你的原始代码被解释为每个孩子都嵌套在前一个孩子里面;因此，每一个都与其先前的兄弟姐妹相关。（实际上，它的父母）。

JSFiddle

独立地将div放在父div中

1 个答案: