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

时间:2019-06-21 06:35:53

标签: html css

我有几个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的右侧与屏幕的右侧保持一定距离?

这是预期的输出(外部周围的黑色矩形代表屏幕的边缘):

enter image description here

1 个答案:

答案 0 :(得分: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>