Question

我有两个div。但下面的那个覆盖了上面的那个。怎么样？关于div＆＃34; hoogte＆＃34;。它位于div＆＃34; doelstelling＆＃34;旁边。而div＆＃34; hoogte＆＃34;必须在div＆＃34; doeltelling＆＃34;之下。 https://jsfiddle.net/5g0ur45u/

 #bovenrij {
 width: 80%;
 float: right;
 margin-right: 3em;



  }

#bovenrij div{
 width: 20%;
 float: left;


}



#interactief{
width: 28%;
background-color: #e8b215;
float: left;
padding-top: 1em;
padding-bottom: 1em;
padding-left:2% ;
padding-right: 2%;
margin-left: 2%;
}

/*licht roze achtergrond kleur*/
#platform, #ad, #platformad, #customised, #personal{
background-color: #f4f4f4;
float: left;
width: 28%;
margin-left: 2%;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2%;
padding-right: 2%;
}

#interactief > h1{
color: white;
font-size: 18px;
margin-bottom: 0.4em;
}
/*titel*/
#platform > h1, #ad > h1, #platformad > h1, #customised > h1, #personal > h1{
color: #e8b215;
font-size: 18px;
margin-bottom: 0.4em;
}
/*sub titel*/
#interactief > h2, #platform > h2, #ad > h2, #platformad > h2, #customised >    h2, #personal > h2{
color: black;
margin-bottom: 1em;

}

/*uitleg tekst*/
#interactief > p, #platform > p, #ad > p, #platformad > p, #customised > p,    #personal > p{
line-height: 120%;
margin-bottom: 1em;
}
/*lees meer*/
#interactief > h3 {
margin-left: 0em;
background-color: #3c434a;
padding: 0.5em;
width: 4.75em;
border-radius: 0.3em;
}
/*lees meer*/
#platform > h3, #ad > h3, #platformad > h3, #customised > h3, #personal > h3{
background-color: #3c434a;
width: 4.75em;
padding: 0.5em;
border-radius: 0.3em;
}

@media screen and (max-width: 1088px) {
#bovenrij div{
  width: 43%;
  float: left;
}


}

.clearfix:after {
 visibility: hidden;
 display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
 }

Answer 1

尝试将<div style="clear:both;"></div>放在hoogte div之前，就像这样

<div style="clear:both;"></div>

  <div id="hoogte">
    <h1>Blijf op de hoogte</h1>
  </div>

或

  <div id="hoogte" style="clear:both;">
    <h1>Blijf op de hoogte</h1>
  </div>

Answer 2

<meta charset="utf-8">

你必须使用clear：两个属性以避免重叠。请参考你的小提琴。

https://jsfiddle.net/kq7w8f80/

Answer 3

删除课程clearfix - #bovenrij

添加课程clearfix - #doelstelling

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

#bovenrij {
  width: 80%;
  float: right;
  margin-right: 3em;
  position: relative;
  

}

#bovenrij div{
  width: 20%;
  float: left;


}



#interactief{
    width: 28%;
    background-color: #e8b215;
    float: left;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left:2% ;
    padding-right: 2%;
    margin-left: 2%;
}

/*licht roze achtergrond kleur*/
#platform, #ad, #platformad, #customised, #personal{
    background-color: #f4f4f4;
    float: left;
    width: 28%;
    margin-left: 2%;
    margin-bottom: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 2%;
    padding-right: 2%;
}

#interactief > h1{
    color: white;
    font-size: 18px;
    margin-bottom: 0.4em;
}
/*titel*/
#platform > h1, #ad > h1, #platformad > h1, #customised > h1, #personal > h1{
    color: #e8b215;
    font-size: 18px;
    margin-bottom: 0.4em;
}
/*sub titel*/
#interactief > h2, #platform > h2, #ad > h2, #platformad > h2, #customised > h2, #personal > h2{
    color: black;
    margin-bottom: 1em;

}

/*uitleg tekst*/
#interactief > p, #platform > p, #ad > p, #platformad > p, #customised > p, #personal > p{
    line-height: 120%;
    margin-bottom: 1em;
}
/*lees meer*/
#interactief > h3 {
    margin-left: 0em;
    background-color: #3c434a;
    padding: 0.5em;
    width: 4.75em;
    border-radius: 0.3em;
}
/*lees meer*/
#platform > h3, #ad > h3, #platformad > h3, #customised > h3, #personal > h3{
    background-color: #3c434a;
    width: 4.75em;
    padding: 0.5em;
    border-radius: 0.3em;
}

@media screen and (max-width: 1088px) {
    #bovenrij div{
      width: 43%;
      float: left;
    }


}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

<div id="doelstelling"  class="clearfix">
<h1>De Oplossing voor elke doelstelling</h1>
<h2>Onze online producten en Lorem Ipsum</h2>
    <p>Present commodo cursus nagnva vel scelerisque nisl consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>



<div id="bovenrij" >
		<div id="interactief">
			<h1>Interactieve video's</h1>
			<h2>Zijn met Lorem Ipsum</h2>
			<p>Present commodo cursus nagnva vel scelerisque nisl<br>consecteur et, integor posere eat a ante venetatis</br> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
		<div id="platform">
			<h1>Ons Online Video Platform</h1>
			<h2>Is altijd Ipsum Color</h2>
            <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
		<div id="ad">
			<h1>Video Advertentie Platforms</h1>
			<h2>Zijn zeer lorem ipsum dolor</h2>
            <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>

<div id="platformad">
			<h1>Video advertentie Platforms</h1>
			<h2>Zijn zeer Lorem Ipsum dolor</h2>
    <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
		<div id="customised">
			<h1>De customised Player</h1>
			<h2>Bieden wij Lorem Ipsum Dolor</h2>
            <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
		<div id="personal">
			<h1>Gepersonaliseerde Video's</h1>
			<h2>Kunnen de Lorem Ipsum dolor</h2>
            <p>Present commodo cursus nagnva vel scelerisque nisl<br/>consecteur et, integor posere eat a ante venetatis<br/> danihul noiseure velt aligeur. donec ullimax</p>
			<h3>Lees meer</h3>
		</div>
	</div>
</div>

<div id="hoogte">
	<h1>Blijf op de hoogte</h1>
</div>

为什么两个div在没有定位的情况下相互叠加？

3 个答案: