css - div の背景がコンテンツと一致しない

Question

私はhtmlとcssが初めてです。css を使用して html ページをコーディングしましたが、混乱しました。

このcssコードを使用しました

#container {
background: #000000;
width: 500px;
margin: auto;
}
#left {
background: #FF0000;
width: 200px;
float: left;
}
#right {
background: #0000FF;
width: 200px;
float: right;
}

そしてこのhtmlコード

<div id="container">
<div id="left">This is left</div>
<div id="right">This is right</div>
</div>

しかし、#container で指定した黒の背景が得られませんでした。それを手伝ってくれませんか。コンテンツを書いているときに背景を自動的に移動させたい。IDコンテナを持つdivの間に。

Answer 1

これはあなたにとってうまくいくでしょう

#container {border:2px solid #cccccc;
height:50px;
background-color: #000000;
width: 500px;
margin: auto;
}

Answer 2

これは、内側の div に Float を使用しており、コンテナーにテキストが含まれていないためです。

これを試して

<div id="container">


    hello <br>
<div id="left">This is left</div>
<div id="right">This is right</div>
<br><br>

    </div>

Answer 3

#containerに設定

float: left;

また

display:inline-block;

実際の例については、ここをクリックしてください。