html - 水平对齐两个 div(一个在容器的最左边，另一个在容器的最右边)

<分区>

我在一个游戏网站上工作，想将两个 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;
}

最佳答案

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

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

关于html - 水平对齐两个 div(一个在容器的最左边，另一个在容器的最右边)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29580266/