在位置内的div的右边界=固定的div

Question

我想要的是：两个小的“回到顶部”按钮，每个按钮都在自己的div中。这个div对位于外部div中。

一个button-div应该在该外部div中左对齐，另一个button-div应该是右对齐的。我们的想法是让他们“跨越”我的页面容器div。

一切都很好 - 直到我给外部div一个“position：fixed”和“top：70％”，在视口中将它们向下移动。

到目前为止，我发现没有办法右对齐右键 - div; margin-right没有效果，即使我删除了左键（如果它的对齐影响了后面的元素）。

基本方法是：

<div class="tabs1">
<div>
    <a href="#top-of-page">           
        <div class="right1">
            <font color="#FF0000">◄</font> Top
        </div>
    </a>
    <a href="#top-of-page">
        <div class="left1">
            <font color="#FF0000">◄</font> Top
        </div>
    </a>
</div>     

我已经在小提琴 here中提供了上述内容，两者均为＆amp;没有垂直定位。

小提琴的“结果”窗口显示两对“顶部”按钮。顶部的那对表现得像我想要的那样，直到我尝试从视口的顶部向下移动它们。

第二对显示我的所有尝试最终结果：页面正文/容器div左侧的两个按钮。在小提琴中，我将它们垂直分开，否则它们会相互叠加。

什么是“技巧”？

Answer 1

您可以使用right属性;例如right: 10px;。如果您希望它是对称的，您可以使用left作为左对齐。

修改

好吧，我有点误解了这个问题。我会再尝试： 如果您希望两个按钮之间的距离不变，则可以添加left: 50%;，然后通过添加一半与宽度一样大的左边距来更正定位。所以这看起来像这样：

.tabs2 {
    width:250px;
    position:fixed;
    top:60%;
    left:50%;
    margin-left: -125px;
}

编辑2：

如果您只想从某个屏幕宽度开始这种行为，您可以像这样添加媒体查询：

.tabs2 {
    width:100%;
    max-width: 250px;
    position:fixed;
    top:60%;
    left: 50%;
    margin-left: -50%;
}
@media (min-width: 250px) {
    .tabs2 {
        margin-left: -125px;
    }
}

虽然我不确定这是最理想或最干净的方法。