Question

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

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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用position:absolute;和right:11%

Here就是它的样子。

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

3 个答案: