css - 在同一行中，有一个中心元素和最右边的元素

Question

我曾经将问题发布到 http://doctype.com/within-same-line-have-center-element-right-most-element ，但没有得到一个好的答案。我把它贴在这里，希望能得到很好的反馈；)

<div style="float:right">
    right most, same line as hello world and will not push hello world!
</div>

<div style="text-align:center">hello world</div>

目前，最右边的元素会将“hello world”从页面中心推出。我怎样才能避免这种情况？

我愿意

• Hello world 仍处于中心位置
• 右边的元素还是和Hello world在同一行
• 最右边的元素是最右边的
• 两者都是最重要的

谢谢。

我尝试了其他人的一些建议，但行不通。

<div style="text-align:center; width:100%;"> 
  Hello World 
  <div style="float:right">right most, same line as hello world and will not push hello world!</div>
  <div style="clear:both"></div>
</div>

上面的代码，我用IE 8测试过，不会在同一行。我用 firefox 3.6.8 测试过，“Hello World”将被右侧元素推向左侧。

Answer 1

在包含的 div 和 position:absolute 上使用 position:relative；右:0px； top:0px; 在最右边的 div:

<div style="text-align:center; width:100%; position:relative;"> 
  Hello World 
  <div style="right:0px; top:0px; position:absolute;">right most, same line as hello world and will not push hello world!</div>
  <div style="clear:both"></div>
</div>

当使用 position:relative 时，内部任何绝对定位的元素都会偏移到相对定位的祖先元素。参见 this blog post更多示例。

演示 - http://jsbin.com/itene