Question

我希望div始终位于其父div的右侧，因此我使用float:right。它有效。

但我也希望它在插入时不影响其他内容，所以我使用position:absolute。

现在float:right不起作用，我的div始终位于其父div的左侧。我怎样才能将它移到右边？

Answer 1

使用

position:absolute; right: 0;

无需float:right绝对定位

此外，请确保将父元素设置为position:relative;

Answer 2

一般来说，float是一个相对定位语句，因为它指定了元素相对于其父容器的位置（向右或向左浮动）。这意味着它与position:absolute属性不兼容，因为position:absolute是绝对定位语句。您可以浮动元素并允许浏览器相对于其父容器定位它，也可以指定绝对位置并强制元素出现在某个位置而不管其父级。如果您希望屏幕右侧显示绝对定位的元素，则可以使用position: absolute; right: 0;，但这会导致元素始终显示在屏幕的右边缘，而不管其父级的宽度{ {1}}是（因此它不会“在其父div的右侧”）。

Answer 3

也许你应该使用浮点数来划分你的内容：

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

注意overflow: auto;，这是为了确保您的容器有一定的高度。浮动内容将它们从DOM中取出，以确保下面的元素不会与您的漫游浮动重叠，设置容器div以使overflow: auto（或overflow: hidden）确保在绘制高度时会考虑浮动。查看有关浮动以及如何使用它们的更多信息here。

Answer 4

您可以使用＆＃34; translateX（-100％）＆＃34;和＆＃34; text-align：right ＆＃34;如果你的绝对元素是＆＃34; 显示：inline-block ＆＃34;

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

您将获得与右侧相对于其父级

的绝对元素对齐

Answer 5

我能够绝对定位一个右浮动元素，它有一层嵌套和一个棘手的边缘：

＆＃13;

function test() {
  document.getElementById("box").classList.toggle("hide");
}

＆＃13;

.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}

＆＃13;

<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

＆＃13;

我决定让它可以切换，这样你就可以看到它不会影响周围文本的流动（运行它并按下按钮来显示/隐藏浮动的绝对框）。

浮动权和绝对位置不能一起工作

5 个答案: