<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div>
为什么是边距:“主数据”的顶部不工作在上面的代码?
解决方法
你可以把两个浮动的div放到另一个有“overflow:hidden”设置的div:
<div style='overflow:hidden'> <div style="float: left;">Left</div> <div style="float: right;">Right</div> </div> <div style="clear: both; margin-top: 200px;">Main Data</div>
编辑 – 添加一点到这个5岁的答案:我认为引起混乱的行为的原因是margin collapse的有点复杂的过程。一个很好的技巧与OP的原始HTML是添加一个CSS规则像这样:
div { border: 1px solid transparent; }
Poof!现在(没有我的额外的< div>)它工作正常!嗯,除了那个额外的像素从边界。特别是,我认为这是清楚的方式的组合:工作和边缘崩溃规则,导致意外的布局从OP中的代码。
再次编辑 – 对于完整的(和,我认为,完全准确)的故事,见Mark Amery’s excellent answer.细节有一些复杂性,这个答案掩盖了。
原文地址:https://www.jb51.cc/css/223297.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。