CSS相对位置，右侧相对于视口

Question

我有几个div，每个div是上一个的子级。它们都位于relative的位置，这样我就可以相对于父母抵消孩子们的影响。我想将右侧对齐，但是我不知道该怎么做。显然width: 100%不起作用，因为它忽略了div不在left: 0处。

如您所见，div逃离视口：

div {
  position: relative;
  width: 100%;
  height: 250px;
  left: 50px;
  top: 50px;
}

#div1 {
  background-color: #4286f4;
}

#div2 {
  background-color: #3267bc;
}

#div3 {
  background-color: #244a87;
}

<div id="div1">
  <div id="div2">
    <div id="div3">
      
    </div>
  </div>
</div>

或者，如果您愿意：JSFiddle

如何仅使用CSS将每个div的右侧与屏幕的右侧保持一定距离？

这是预期的输出（外部周围的黑色矩形代表屏幕的边缘）：

Answer 1

您可以考虑使用margin-left代替left。

默认设置为CSS box model，“宽度和高度属性包括内容，但不包括填充，边框或边距”，（box-sizing）。 / p>

而且，块级元素占用“可用的全部宽度”，因此width:100%不是必需的（Block-level elements）。

body {
  margin: 20px 60px 20px 20px;
}

div {
  position: relative;
}

div div {
  height: 80px;
  margin-left: 40px;
  top: 40px;
}

#div1 {
  background-color: #4286f4;
}

#div2 {
  background-color: #3267bc;
}

#div3 {
  background-color: #244a87;
}

<div id="div1">
  <div id="div2">
    <div id="div3"></div>
  </div>
</div>