私はゲームの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;
}
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>
フレックスでシンプルにする
.wrapper{ display: flex; justify-content: space-between }
<div class="wrapper"><span>1</span><span>2</span></div>
問題は、適切なインラインブロック要素をターゲットにしていないことです。 :)
.header > div{
display: inline-block;
}
.playerOne{
float:right;
}