Divs重叠

本文介绍了Divs重叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我遇到一个问题，即div彼此重叠，即使它们应该在彼此之下，我不知道为什么会发生这种情况。

I'm having an issue where divs are overlapping each other, even though they should appear below each other, I have no idea why this is happening.

容器

<div class="container"> <div class="box" style="float:right"> <p></p> </div> <div class="box" style="float:left"> <p></p> </div> <div class="longContent topLongContent"> <h2>Long Content</h2> <p></p> </div> <div class="longContent"> <h2>Long Content</h2> <p></p> </div> <div class="longContent"> <h2>Long Content</h2> <p></p> </div> </div>

样式表

body{ background-image:url('sos.png'); color:#ecf0f1; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } .container{ width:50%; margin: 0 auto; } .box{ width:49%; background-color:#2c3e50; margin-top:5%; } .box p{ padding: 2% 5% 3% 5%; } .box h2{ font-weight:800; padding: 2% 5% 0% 3%; } .longContent{ width:100%; margin: 0 auto; background-color:#34495e; margin-top:2%; } .topLongContent{ margin-top:16%; } .longContent p{ padding: 2% 5% 3% 5%; } .longContent h2{ font-weight:800; padding: 2% 5% 0% 3%; } .header{ width:100%; background-color:#2c3e50; /* Drop shadow Bottom */ -webkit-box-shadow: 0 6px 4px -6px black; -moz-box-shadow: 0 6px 4px -6px black; box-shadow: 0 6px 4px -6px black; } .header h1{ font-size:2.5em; font-weight:900; padding: 1% 0% 1% 3%; } .callToAction{ float:right; font-size:1.25em; margin:-2% 5% 0% 0%; color:#f39c12; }

我甚至尝试删除 .topLongContent 但是内容仍然超过圈，并且像框div是 longContent divs的一部分。

I have even tried removing the .topLongContent but the content still over laps and acts as though the box divs are part of the longContent divs.

推荐答案

尝试清除清除： .longContent 元素。