javascript - 使用 CSS 将包含相关元素的 DIV 居中

Question

我对这种行为很纠结。我在 DIV 容器中添加了两个 DIV(sub1 和 sub2)。 Sub2 设置了一个相对位置，与 Sub1 的右下角重叠。这样一来，容器DIV的宽度就不好了，和改变Sub1的相对位置之前一样。起初，这没有问题，但后来，客户决定将整个东西居中，因此需要容器的实际宽度。

这可以通过 CSS 实现吗？即使在 JavaScript 中，我也得到了相同的宽度(错误的宽度)。

这是问题的一个简单示例:

html, body {
  width:100%;
  height: 100%;
}

#main {
  position: fixed;
  display: inline-block;
  margin: auto;
}

#sub1 {
  width: 100px;
  height: 100px;
  background-color:red;
  position: relative;
}

#sub2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: relative;
  left: 80px;
  top: -20px;
}

<div id="main">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>

Answer 1

如果您希望您的容器 DIV 具有两个 block 的宽度，则不应使用相对定位。改为使用边距

#sub2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-left: 80px;
  margin-top: -20px;
}