2
3つのdivが隣り合って配置されていますが、高さと幅は同じです。何らかの理由で一方が他方よりも高く置かれています。彼らはまだお互いに隣り合っていますが、トップからのマージンはそれぞれ1つずつ異なります。divで異なるマージン
HTML：
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>Beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p>
<img src="Foto's/IMG_2704.JPG">
</div>
<div id="dienst3">
<h2>Camerabeveiliging</h2>
<p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven. Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p>
</div>
CSS：
.diensten h2 {
padding-top: 40px;
}
.diensten p, h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
padding: 20px;
}
.diensten {
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
}
#dienst1 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst3 {
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
}
#dienst2 img{
height: 300px;
width: 450px;
}
#dienst1 img {
position: relative;
display: block;
margin: auto;
width: 450px;
margin-top: 100px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst2 img{
position: relative;
display: block;
margin: auto;
width: 450px;
height: 350px;
margin-top: 30px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst3 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
あなたはそこに反復がたくさんあります。シンプルなjsFiddleを構築してシナリオを表示してみてください。次に例を示します。https://jsfiddle.net/sheriffderek/L73m8jd8/ – sheriffderek