水平对齐两个div（一个位于极左侧，另一个位于容器的最右侧）

Question

我正在开发一个游戏网站，并希望在“标题”div中放置两个div，使它们水平对齐并位于此容器div的左侧和右侧。请参阅下面的示例：

Oli                                                                             Matt

这是我的尝试。我的错误是什么？

HTML：

<div class="header">
     <div class="playerOne">
     Oli
     </div>
     <div class="playerTwo">
     Matt
     </div>
</div>

CSS：

.header{
  display: inline-block;
}
.playerOne{
    margin-left: 0;
 }

.playerTwo{
  margin-right: 0;
}

Answer 1

• display:inline-block不会产生float问题，因此需要添加clearfix
• 您也可以使用overflow:hidden代替display:inline-block

＆＃13;

＆＃13;

.header {
  display: inline-block; 
  width: 100%;
  border: 1px solid red;
}
.playerOne {
  float: right;
}
.playerTwo {
  float: left;
}

＆＃13;

<div class="header">
  <div class="playerOne">
    Oli
  </div>
  <div class="playerTwo">
    Matt
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许使用花车？

.playerOne{
    float: left
 }

.playerTwo{
  float: right
}

http://jsfiddle.net/dfLa5nmL/

Answer 3

问题是您没有定位正确的内联块元素。 ：）

.header > div{
  display: inline-block;
}
.playerOne{
  float:right;
}

Answer 4

使用flex使其简单

.wrapper{ display: flex; justify-content: space-between }

<div class="wrapper"><span>1</span><span>2</span></div>