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

Question

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

3

我有几个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的右侧位置调整到屏幕右侧的特定距离?

这是期望的输出结果(外部黑色矩形表示屏幕边缘):

- Clonkex

1

请问您能否分享所需输出的屏幕截图？ - Nitin Daddikar

每个 div 距离左边 50 像素，宽度为 100%... 它不是必须在视口外 50 像素吗？每个 div 都比上一个多 50 像素？ - Bman70

@NitinDaddikar 好的，已添加。 - Clonkex

@Bman70 嗯，是的，但是该怎么做？我不知道在CSS中获取相对于视口的当前左位置的方法。 - Clonkex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- showdev · Accepted Answer

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

根据CSS盒模型的默认设置，“宽度和高度属性包括内容，但不包括填充、边框或外边距”（box-sizing）。

此外，块级元素占据“可用的全部宽度”，因此不需要width:100%（块级元素）。

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>