web-dev-qa-db-ja.com

2つのdivを水平に配置します（コンテナーの左端と右端）

私はゲームのWebサイトで作業しており、「ヘッダー」div内に2つの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;
}
htmlcssalignmentfrontenddisplay
14
oli5679
  • 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>
16
Vitorino fernandes

フレックスでシンプルにする

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

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

4
thiru murugan

問題は、適切なインラインブロック要素をターゲットにしていないことです。 :)

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

たぶんフロートを使うの？

.playerOne{
    float: left
 }

.playerTwo{
  float: right
}

http://jsfiddle.net/dfLa5nmL/

2
jpedroribeiro