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为

float: left;

或者

display:inline-block;

单击此处查看实时示例。

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 {border:2px solid #cccccc;
height:50px;
background-color: #000000;
width: 500px;
margin: auto;
}