参见英文答案 >
Floating elements within a div,floats outside of div. Why?8个答案我的主容器高度不跟随他们的孩子的宽度
这是我的代码,你有什么建议请指教。
我需要CSS解决方案,而不是JavaScript,所以谢谢提前
<div id="mainContainer"> <div id="leftContent"> </div> <div id="rightContent"> </div> </div>
这是我的css
#mainContainer{ width: 1000px; /*height: 1000px;*/ height:auto; margin-left:auto; margin-right:auto; background-color: #ff6600; padding-bottom: 20px; } #leftContent{ height: 100px; float: left; width: 380px; background-color: violet; } #rightContent{ height: 100px; float: right; width: 620px; background-color: yellow; }
解决方法
添加overflow:hidden;到容器:
#mainContainer{ width: 1000px; /*height: 1000px;*/ height:auto; margin-left:auto; margin-right:auto; background-color: #ff6600; padding-bottom: 20px; overflow: hidden; /* <--- here */ }
由于其内容浮动,容器div崩溃。使用’clearfix’类,或者正如我所提到的,添加overflow:hidden将使容器包含浮动元素。
更新说明为什么这可以在这里找到:http://stackoverflow.com/a/9193270/1588648
原文地址:https://www.jb51.cc/css/218143.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。