[英]Why is float:right making the div float to the left?
I'm new to CSS. 我是CSS的新手。 I'm trying to position a div (#inner) in the bottom-right corner of another div (#container).
我正在尝试将div(#inner)放置在另一个div(#container)的右下角。 I wrote
float: right;
我写了
float: right;
but when running the Html I see the inner div in the bottom- left corner of the container. 但在运行HTML时我看到容器的左下角内股利。 Why is that?
这是为什么? What's wrong with the code?
代码有什么问题?
#container { position: relative; border: solid; width: 70%; height: 40%; } #inner { position: absolute; border: solid; bottom: 0; float: right; width: 30%; height: 30%; }
<div id="container"> <div id="inner"> ABC </div> </div>
Using float
with absolute positioning doesn't really make sense. 绝对定位使用
float
并没有任何意义。 I think what you want is right:0
instead of float:right
我认为您想要的是
right:0
而不是float:right
#container { position: relative; border: solid; width: 70%; height: 40%; overflow: auto; } #inner { position: absolute; border: solid; bottom: 0; right:0; width: 30%; height: 30%; } body, html { height: 100%; }
<div id="container"> <div id="inner"> ABC </div> </div>
Just remove the absolute position. 只需删除绝对位置即可。 Also, if you want the container to wrap the float/s, add "overflow: auto" to the container element:
另外,如果您希望容器包装float / s,请在容器元素中添加“ overflow:auto”:
#container { position: relative; border: solid; width: 70%; height: 40%; overflow: auto; } #inner { border: solid; bottom: 0; float: right; width: 30%; height: 30%; }
<div id="container"> <div id="inner"> ABC </div> </div>
您必须删除“ position:absolute”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.