html - 2个div不愿意彼此相邻显示

Question

我有 2 个 div，我需要将它们并排放置，最后添加第 3 个。我试过 float 它们，我试过显示和位置选项。还检查了其他网站是否复制了该代码，但仍然无法正常工作。

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.
        <img src="Foto's/IMG_2704.JPG">  
       </p>
    </div>
 </div> 

CSS:

.diensten h2 {
    padding-top: 40px;
}

.diensten p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.diensten {
    position: relative;
    display: inline-block;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
}

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 {
    margin-left: 900px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 img{
    height: 300px;
    width: 450px;
}

Answer 1

将 display: flex 添加到父级，并删除 #dienst2 上的巨大 margin-left - 或者不，是'没必要，但我做到了，因为你希望它们彼此并排。您放在它们旁边的任何其他元素都将显示在同一行中。

.diensten h2 {
    padding-top: 40px;
}

.diensten p, h2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    padding: 20px;
}

.diensten {
    position: relative;
    height: 500px;
    background-color: #FFFFFF;
    margin: auto;
  display: flex;
}

#dienst1 {
    margin-left: 90px;
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 {
    height: 500px;
    width: 500px;
    box-shadow: 0px 0px 30px 0px #000;
}

#dienst2 img{
    height: 300px;
    width: 450px;
}

<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.
      <img src="Foto's/IMG_2704.JPG">
    </p>
  </div>
</div>