Question

我有一些html元素：基本上是容器div和子div。因此，当我给孩子div一个CSS属性left: 100%时，它就会超出父div。属性right: 0或CALC可以解决这个问题，但我希望只使用left: 100%完成此操作，而不使用Javascript。那么有什么办法可以做到这一点吗？

.parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: 100%;
  position: absolute;
  width: 100px;
}

https://jsfiddle.net/evoSL/yd48v14m/4/

Answer 1

这是正确的行为。如果在此设置中将left：100％设置为，则将获取父级的宽度，并将该宽度的100％推向右侧，即500px。如上所述，您可以设置负边距宽度固定像素值，但我不推荐它。如果您有流体宽度布局怎么办？它不起作用。

right: 0出了什么问题，它提供了您正在寻找的内容。

否则，如果您仍想使用left: 100%;，则可以向孩子添加transform: translateX(-100%)。这将使孩子在X轴上移动它的宽度。

Answer 2

好吧，如果你有一个固定的，你可以用你的孩子的负余量来做到这一点：

.parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: 100%;
  position: absolute;
  width: 100px;
  margin-left: -100px;
}

https://jsfiddle.net/yd48v14m/5/

Answer 3

您也可以使用浮点数执行此操作。我不知道你最终想要达到什么目标，但这也是你可以使用的东西：

＆＃13;

.parent {
  border: 1px solid #000;
  height: 500px;
  width: 500px;
}
.child {
  background: #FF0;
  height: 100px;
  width: 100px;
  float: right;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

Answer 4

使用左：100％，您可以使您孩子的第一个边框停留在容器的末尾

如果你的目标是让黄色框对齐，你可以选择：

.parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: calc(100% - 100px);
  position: absolute;
  width: 100px;

}

.child{
  background: #FF0;
  height: 100px;
  right: 0;
  position: absolute;
  width: 100px;

}

使用Left定位绝对值：100％，Child元素超出父continer

4 个答案: