[英]Elements not extending parent element height
I have a container in which I'm putting a bunch of elements, and my expectation was that the container would expand downward as the container filled with elements. 我有一个容器,其中我放了一堆元素,我的期望是当容器充满元素时容器会向下扩展。 Unfortunately, this is not the case.
不幸的是,这种情况并非如此。 I have some div's that are floating over the edge of my container.
我有一些div漂浮在我的容器边缘。 I was able to remedy this with a bunch of break tags, but this was a sloppy solution.
我能用一堆破坏标签来解决这个问题,但这是一个草率的解决方案。
Perhaps my CSS is incorrect, but I can't figure out where. 也许我的CSS不正确,但我无法弄清楚在哪里。 The long select list and the major description should reside in the upper, white box.
长选择列表和主要描述应位于上部白色框中。
EDIT: Uwe led me to research floats. 编辑:Uwe带我去研究花车。 I've discovered that floats are not considered in the normal flow layout.
我发现在正常流程布局中不考虑浮动。 So how is this fixable?
那怎么可以解决这个问题呢?
EDIT 2: I found a clearfix solution. 编辑2:我找到了一个clearfix解决方案。
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
There are many ways to clear floats; 清除浮子的方法有很多种; simply appending
overflow: hidden;
简单地追加
overflow: hidden;
to .main
will solve your problem. 到
.main
将解决您的问题。
In practice though, it's probably better to directly clear the floats which are causing the problems rather than applying a fix to the parent div. 但实际上,最好直接清除导致问题的浮点数,而不是将修复程序应用于父div。 I would actually recommend appending the following properties to .bottom instead:
我实际上建议将以下属性添加到.bottom:
.bottom {
clear: both;
overflow: hidden;
}
clear: both
takes care of clearing the floats in .content
. clear: both
负责清除.content
的浮动。 overflow: hidden
takes care of clearing the floats in .bottom
overflow: hidden
负责清除.bottom
的浮动 You should also look into using the id
attribute in addition to the class
attribute for your HTML tags. 除了HTML标记的
class
属性之外,您还应该考虑使用id
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.