不能使 div 正确浮动（可能是因为 flexbox？）

Question

基本上，在页面中间有一个容器 div 和 2 个子 div。需要正确的位于容器的最右侧。浮动：右不起作用。不能使用 margin-left 因为我希望它适用于任何分辨率。对：0 也不起作用。使用弹性盒。可能与它有关。

html代码

<div class="parent">
 <div class="child1">adsfasdfdsa</div>
 <div class="child2">192837192</div>
</div>

css代码

.parent {
  -o-display:flex;
  -webkit-display:flex;
  -ms-display:flex;
  -moz-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex; 
  width:80%;
  margin:0 auto;
}
.child2 {float:right;}

这是一个小提琴 http://jsfiddle.net/82yXE/

Answer 1

尝试将左边距设置为auto，它会强制浏览器将.child2移动到右侧位置：

.child2 {
  margin-left: auto;
}

检查这个工作示例：http://jsfiddle.net/e6eLf8yu/

Answer 2

下面是一个工作示例。为了获得更好的结果，我将添加一个 clearfix css div。

.parent {
  -o-display:flex;
  -webkit-display:flex;
  -ms-display:flex;
  -moz-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex; 
  width:80%;
  margin:0 auto;
    background-color:white;
  }
.child1, .child2 {
  float: left;
  width:50%
  }
.child2{
  text-align: right;
  }

<div class="parent">
 <div class="child1">adsfasdfdsa</div>
 <div class="child2">192837192</div>
</div>

Answer 3

使用position:absolute; 和right:11%

Here 就是它的样子。