水平对齐两个div（一个在最左边，另一个在容器的最右边）[重复]

Posted 2023-02-22

【中文标题】水平对齐两个div（一个在最左边，另一个在容器的最右边）[重复]

【英文标题】：Align two divs horizontally (one on extreme left and the other on extreme right of container) [duplicate]

【发布时间】：2015-06-17 06:49:24

【问题描述】：

我正在开发一个游戏网站，并希望将两个 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;

【参考方案1】：

也许使用浮点数？

.playerOne
    float: left
 

.playerTwo
  float: right

http://jsfiddle.net/dfLa5nmL/

【参考方案2】：

display:inline-block 不会创建 float 问题，因此无需添加 clearfix 您也可以使用overflow:hidden 代替display:inline-block

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

【讨论】：

这不起作用

使 div 显示为 inline-block 作品。

【参考方案3】：

问题在于您没有针对正确的 inline-block 元素。 :)

.header > div
  display: inline-block;

.playerOne
  float:right;

【参考方案4】：

使用 flex 让事情变得简单

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

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

【讨论】：

jsfiddle.net/x17skhap

如此完美的解决方案。我一直在努力完成它，这个解决方案奏效了！

简单而伟大