我想知道是否有人可以向我解释为什么会发生这种情况。抱歉，我是 CSS/HTML 新手。我正在为一个基本页面创建 HTML 布局，目前我有三个 Div。我想要一个容器位于左侧 (id= leftside)，宽度为 50%，另一个容器位于右侧 (id=rightside)，宽度为 50%，第三个容器 (id=narrow) 位于它们下方，宽度为 100%。
所以目前我的第三个 div 隐藏在前两个 div 的下面，除非我添加属性“top: 50%;”到那个div。有人可以解释为什么会发生这种情况吗？我认为由于空间已经被我的另外两个 div 占用，所以我不必使用“top”属性来显示第三个 div。为什么它被其他 div 隐藏了？
这是我的 HTML 代码:
<body>
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</body>
这是我的 CSS 代码:
#leftside{
width: 50%;
height: 50%;
background-color: blue;
float:left;
}
#rightside{
width: 50%;
height: 50%;
background-color: red;
float:right;
}
#narrow{
width:100%;
height:20%;
background-color:black;
}
最佳答案
每当您对元素使用 float 时，请不要忘记清除它们。
为了更方便，我总是对父 div 使用 overflow:hidden;:
<div class="parent">
<div id="leftside"></div>
<div id="rightside"> </div>
<div id="narrow"></div>
</div>
.parent{overflow:hidden;}
现在，你知道隐藏的关键原因了吗？
关于html - 有人可以解释为什么 Div 隐藏在 HTML 布局中的其他 Div 后面吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26951231/