为什么我的div不会浮动到右侧

Question

我有两个这样的股利

<div id="pos-bar">
  <div id="pointer"></div>
</div>

CSS就是这样

#pos-bar {
 height: 10px;
 width: 960px;
 margin: 0 auto; }

#pointer{
 height: 4px;
 width: 180px;
 float: right;
 background-color: #57c5a0; }

我尝试使“指针” div浮动到“ pos-bar” div的右侧，但是使用此代码，它仅浮动到“ pos-bar” div的中间。 每当我尝试增加留给“指针”的边距时，div就会下降，而不是在“ pos-bar div”中。为什么会这样？

Answer 1

我想让#pointer完全浮动，您需要将父对象的宽度扩展到窗口的总宽度。

为此，您可以删除width:960px; 在#post-bar ，默认情况下它将扩展到其容器的总宽度，并且它的子级（ #pointer ）可以一直浮动到正确的位置。

看到这个FIDDLE

Answer 2

只需在pos-bar div中添加一个float:right即可。 如果孩子和父母不具有某些重要的css特征，则孩子要离开父母。 像绝对/相对位置。