Div有2个跨度，中心1，右对齐，但保持第一个居中

Question

我有一个有2个跨度的div。我想保持第一个跨度相对于div居中，然后右对齐第二个（我正在使用自举的右拉）。

在下面的JSBin中，你会看到我在追求的东西。我希望Div1中的“Hello”范围与Div2中的“Hello”范围相同。换句话说，我想将第一个跨度相对于父级居中，而不受div中任何其他跨度的影响......

这是我的jsbin：http://jsbin.com/cixun/1/

Answer 1

一种选择是相对于span绝对定位右div：

http://jsbin.com/wuged/1/edit

.row{
  position: relative;
}

.right{
  position: absolute;
  right: 0;
}

<div class="row black center" >
   <span class="first">Hello</span>

   <span class="right">more text on the right</span>
</div>

Answer 2

执行此操作的最佳方法是绝对定位右跨，而不是浮动它。这将使它脱离流程，而另一个跨度不会“感觉”它，并且更正确地位于页面的中心

<强> CSS

.row{position:relative;} /*required to make this a positioning container for abs.     
            positioned span */
.right{position:absolute;right:0px;}