似乎浮动的HTML元素不会扩展其容器的高度.例如,请考虑以下代码:
.portfoliosite {
background: #777;
padding: 10px;
width: 550px;
}
.portfoliothumbnail {
background: red;
margin: 0 10px 10px 0;
float: left;
height: 150px;
width: 150px;
}
AwesomeSite.Com
An awesome site I did. It launched on Jan 1, 2009
注意灰色背景的包含div比红色div短,红色div扩展到容器边界之外.我希望包含元素扩展到其内容的大小,包括浮动元素.
有没有一个优雅的解决方案来实现这一点,最好是一个不涉及设置固定高度或使用JavaScript？
添加overflow: auto包含元素:
.portfoliosite {
background: #777;
padding: 10px;
width: 550px;
overflow: auto;
}
.portfoliothumbnail {
background: red;
margin: 0 10px 10px 0;
float: left;
height: 150px;
width: 150px;
}
AwesomeSite.Com
An awesome site I did. It launched on Jan 1, 2009
是.当div关闭时你应该清除你的浮动.
Floated Div
京公网安备 11010802040832号 | 京ICP备19059560号-6 