我有一个bodyMain div宽度为100%。内部是一个具有自动边距的body div 800px(可以使用“body”作为id吗?)。里面是两个div的bodyLeft和bodyRight分别为200px和600px。当我向内部div添加内容时,bodyMain和body的身高都不会扩展。所有的高度都是自动的。
这是代码:http://jsfiddle.net/TqxHq/18/
HTML:
<body> <div id="bodyMain"> <div id="body"> <div id="bodyLeft"> left text goes here<br /> </div> <div id="bodyRight">Right text goes here </div> </div> </div> </body>
CSS:
#bodyMain{ border:1px solid red; width:100%; height:auto; } #body{ border:1px solid green; width:804px; height:auto; margin:auto; } #bodyLeft{ border:1px solid blue; float:left; width:200PX; height:auto; } #bodyRight{ border:1px solid orange; float:right; width:600PX; height:auto; }
解决方法
你必须添加
<div style="clear:both;"></div>
在浮动结束时解决这个问题。看到
here
当浮动元素位于容器框内并且元素不会自动强制将容器的高度调整为浮动元素时,会出现问题。当一个元素浮动时,它的父代不再包含它,因为浮动是从流中移除的。您可以使用两种方法来解决它:
clear:both clearfix
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。