将绝对定位的元素与其祖先的边右对齐

Question

我有一个绝对定位的元素，它已经锚定到它的直接父元素。我当前的设计规范需要两个这样的元素来与祖先容器的末端对齐。我试图在jQuery中找到这些坐标，但无论我做什么，我似乎都无法得到正确的计算。我的第一个想法是将子容器的偏移量设置为最上面容器的总宽度，然后减去子容器的宽度，但由于两者都有填充物，所以有点偏离了。我在这里缺少了什么？有更好的方法来实现这一点吗？不幸的是，我不得不保留父位置和子位置属性。

$('.child').offset({
top: $('.parent').offset().top / 2,
left: $('.container').outerWidth() - $('.child').outerWidth()
});

#container {
border: 1px solid black;
padding: 10px;
}
.parent {
position: relative;
}
.child {
position: absolute;
padding: 10px;
top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<nav id="menu">
<div class="parent">
Parent

<span class="child">Child</span>
</div>
</nav>
</div>

Answer 1

也许我遗漏了一些东西，但我不明白你为什么需要Jquery。一个简单的浮动：右将完美工作。

#container {
border: 1px solid black;
padding: 10px;
}
.parent {
position: relative;
}
.child {

float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<nav id="menu">
<div class="parent">
Parent

<span class="child">Child</span>
</div>
</nav>
</div>

既然你说你不允许使用float，这里有一个使用flex的例子：

#container {
border: 1px solid black;
padding: 10px;
}
.parent {
display: flex;
justify-content: space-between;
position: relative;
}
.child {
padding: 10px;
top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<nav id="menu">
<div class="parent">
Parent

<span class="child">Child</span>
</div>
</nav>
</div>

Answer 2

您可以使用CSStransform属性进行垂直居中，并使用right: 0%将其固定在右端。

#container {
border: 1px solid black;
padding: 10px;
}
.parent {
position: relative;
}
.child {
position: absolute;
padding: 10px;
top: 50%;
right: 0%;
transform: translate(0%,-50%);
}

<div id="container">
<nav id="menu">
<div class="parent">
Parent
<span class="child">Child</span>
</div>
</nav>
</div>