html - CSS DIV 奇怪的行为

Question

我想创建一个名为“容器”的 div，其中包含页面上的所有其他元素。

如果我改变元素移动和重新排列的大小，-但是- div 本身仍然不可见!使用 Firefox 检查器，div 似乎在页面上方。

这对我来说似乎很奇怪，因为 div 都正确嵌套并且在其他方​​面表现良好。

我唯一的猜测是这个位引起了一些麻烦；如果我改变宽度，我的布局就会变得疯狂。

#upper {
float: left;
width: 100%;
height: 40%;
}

#lower {
float: left;
width: 100%;
height: 40%;
}

但是我不能完全确定导致问题的原因。有什么想法吗？

这是我的代码:https://jsfiddle.net/xtaLfuLa/

Answer 1

我只想添加 display:inline-block;进入容器类。

 #container {
    width: 80%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    background: rgb(163, 43, 43);
    border-radius: 20px;
    background: red;
    display:inline-block;
}