为什么我的div不会漂浮到右边缘

Question

我有两个像这样的div

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

我尝试制作＆＃34;指针＆＃34; div浮动到＆＃34; pos-bar＆＃34;的右边缘。 div，但是这个代码它只漂浮在＆＃34; pos-bar＆＃34;的中间。 DIV。每当我尝试向＃34;指针＆＃34;添加保证金时，div就会消失，而不再是＆＃34; pos-bar div。为什么会这样？

Answer 1

我希望#pointer一直向右浮动，你需要将父宽度扩展到窗口的总宽度。

为此，您可以删除width:960px;上的#post-bar，然后默认情况下将其展开为其容器的总宽度，并且它的子容器（#pointer）将能够浮动所有没错。

请参阅 FIDDLE

Answer 2

只需向float:right div添加pos-bar即可。如果孩子和父母不分享一些重要的CSS特征，孩子就会离开父母。像绝对/相对位置一样。