div 的不同边距

Question

我有 3 个 div 并排放置，它们具有相同的高度和宽度。但由于某种原因，一个比另一个高。它们仍然彼此相邻，但每个 1 的顶部边距不同。

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;
}

Answer 1

中间的更高。如果您希望它们与父对象的顶部对齐，请将 vertical-align: top 添加到 3 个 div 中。

.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;
}

.diensten > div {
  vertical-align: top;
}

<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>