Выровняйте два div по горизонтали (один слева, а другой справа от контейнера)

Я работаю над игровым веб-сайтом и хочу разместить два div внутри div «header» так, чтобы они были выровнены по горизонтали и слева и справа от этого 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;
}

frontend html alignment css display
person oli5679    schedule 11.04.2015    source источник

Ответы (4)


arrow_upward
24
arrow_downward

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

person Vitorino fernandes    schedule 11.04.2015
comment
это не работает - person L_H; 11.06.2020
comment
сделать отображение div как встроенный блок. - person Daisy; 27.04.2021

arrow_upward
12
arrow_downward

сделать это проще с flex

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

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

person thiru murugan    schedule 08.10.2018
comment
jsfiddle.net/x17skhap - person thiru murugan; 08.10.2018
comment
Такое идеальное решение. Я изо всех сил пытался это сделать, и это решение сработало! - person Arun Ramachandran; 06.07.2020
comment
Просто и здорово - person vikingsteve; 14.12.2020

arrow_upward
4
arrow_downward

Проблема в том, что вы не нацелились на правильный элемент встроенного блока. :)

.header > div{
  display: inline-block;
}
.playerOne{
  float:right;
}
person Stanimir Yakimov    schedule 11.04.2015

arrow_upward
2
arrow_downward

Может быть, с помощью поплавков?

.playerOne{
    float: left
 }

.playerTwo{
  float: right
}

http://jsfiddle.net/dfLa5nmL/

person jpedroribeiro    schedule 11.04.2015