Question

我有3个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;
}

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>

与div不同的边距

1 个答案: