Divs重叠 [英] Divs overlapping

问题描述

我遇到一个问题，即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 元素。

这篇关于Divs重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！