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

我希望一个 div 总是在它的父 div 的右边，所以我使用 float:right。

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

现在 float:right不工作了，我的 div 总是在它父 div 的左边。我怎样才能把它移到右边？

208911 次浏览
小开
最佳答案

使用

位置: 绝对; 右: 0;

无需 float:right绝对定位

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

小开

也许你应该像这样使用浮点数来划分你的内容:

<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) ，以确保在绘制你的高度时浮动被计算在内。查看更多关于花车的信息以及如何使用它们 给你。

小开

一般来说，float是一个相对定位语句，因为它指定了元素相对于其父容器的位置(向左或向右浮动)。这意味着它与 position:absolute属性不兼容，因为 position:absolute是一个绝对定位语句。您可以浮动一个元素并允许浏览器将其定位到相对于其父容器的位置，或者您可以指定一个绝对位置并强制该元素出现在某个位置。具体来说，具有 position:absolute的元素将被放置在您指定的任何偏移处(具有 left、 right、 top或 bottom) ，从具有 position属性的最近祖先(包含元素)的位置开始，不管它是否具有 float属性。如果它没有任何具有 position属性的祖先，它将被放置在屏幕边缘的指定偏移处。

如果希望绝对定位的元素出现在其父 div的右侧，可以使用 position: absolute; right: 0;——只要父 div具有位置属性(如 position:relative)。但是，如果父 div没有 position 属性，那么这种方法就不起作用，您需要坚持使用 float:right。

小开

如果绝对元素是“ 内联块显示”，则可以使用“ 翻译 X (-100%)”和“ 正确”

<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>

您将获得与右 相对于它的父母对齐的绝对元素

小开

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

function test() {
document.getElementById("box").classList.toggle("hide");
}
.right {
float:right;
}
#box {
position:absolute; background:#feb;
width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
display:none;
}
<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>

我决定使这个可切换，这样您就可以看到它如何不影响周围文本的流动(运行它并按下按钮显示/隐藏浮动的绝对框)。


提交答案