绝对位置左：100％，子元素离开父大小写

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

这是正确的行为。如果在此设置中将左侧设置为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

你也可以用浮标做到这一点。我不知道你想达到什么最终不过这是后话，你可以使用太多：

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

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

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; 

}