2 div不願意相互顯示

Question

我有2個div我需要相互緊挨着放置，最終添加第3​​個。我試過將它們浮起來，我嘗試過顯示和位置選項。 還檢查了複製該代碼的其他網站，但它仍然無效。

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>

Answer 2

您應該添加顯示：內聯;以及去除餘量

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

#dienst2 { 

    height: 500px; 
    width: 500px; 
    box-shadow: 0px 0px 30px 0px #000; 
    display:inline; 
} 

Answer 3

你只需要

position: relative; 
display: inline-block; 

添加到子div s和

position: absolute; 

給父母div。這是一個工作示例（並排3段 - 我縮小了寬度，以便您可以在小窗口中看到它們）。如果需要，您也可以刪除或減少保證金。

.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: 100px; 
 
    box-shadow: 0px 0px 30px 0px #000; 
 
    overflow: hidden; 
 
} 
 

 
#dienst2 { 
 
    margin-left: 90px; 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 500px; 
 
    width: 100px; 
 
    box-shadow: 0px 0px 30px 0px #000; 
 
    overflow: hidden;  
 
} 
 

 
#dienst3 { 
 
    margin-left: 90px; 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 500px; 
 
    width: 100px; 
 
    box-shadow: 0px 0px 30px 0px #000; 
 
    overflow: hidden;  
 
} 
 

 
#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 id="dienst3"> 
 
     <h2>beheer brandmeldinstallatie</h2> 
 
     <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text . 
 
     <img src="Foto's/IMG_2704.JPG"> 
 
     </p> 
 
    </div> 
 
</div>

Answer 4

Div的最初塊級元素。這意味着，除其他外，它們都顯示在他們自己的路線上。有幾種方法可以將兩個div放在一起。你選擇哪一個會達到你想要的效果（和副作用）。這裏有一些選擇：

• 浮法他們（float: left）
• 讓他們內聯塊（display: inline-block）
• 使用Flexbox的（適用display: flex他們的父母）
• 讓他們網格項目（申請display: grid自己父;很新的功能，並要求回退）

我建議你閱讀CSS佈局方法。每種方法都是一個有用的工具，沒有一種是通用的解決方案。你應該儘量熟悉它們。一個很好的資源是learnlayout.com。一旦你掌握了基本知識，如果你想深入探索，你可以看看my book。

Answer 5

如果您打算將3個div彼此相鄰，則需要減小每個div的寬度。

對於每個人來說500px不會工作，除非您的目標受衆是大型桌面;

無論如何，我把它降低到300px的高度和寬度，並使y軸的滾動爲 滾動。

如果你想刪除滾動。 （刪除溢出-Y：滾動，所有的造型），並指定高度，使所有的div的內容是可見的）

查看全屏（＃1力調整）

*{ 
 
    margin:0; 
 
    padding:0; 
 
    box-sizing:border-box; 
 
} 
 

 

 
.diens{ 
 
    width:300px; 
 
    height:300px; 
 
    font-family:sans-serif; 
 
    box-shadow:0px 1px 3px rgba(0,0,0,.6); 
 
    padding:20px; 
 
    float:left; 
 
    overflow-y: scroll; 
 
    margin-right:10px; 
 
} 
 

 
.diens h2{ 
 
    margin: 20px 0px; 
 
} 
 

 
.diens p{ 
 
    font-size:14px; 
 
} 
 

 
.diens::-webkit-scrollbar-track 
 
{ 
 
\t -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
\t background-color: #F5F5F5; 
 
} 
 

 
.diens::-webkit-scrollbar 
 
{ 
 
\t width: 10px; 
 
\t background-color: #F5F5F5; 
 
} 
 

 

 
.diens::-webkit-scrollbar-thumb 
 
{ 
 
\t background-color: #373737; 
 
\t border: 2px solid #F5F5F5; 
 
}

<body> 
 
    <div class="diensten"> 
 
    <div id="dienst1" class="diens"> 
 
     <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> 
 
    </div> 
 

 
    <div id="dienst2" class="diens"> 
 
     <h2>beheer brandmeldinstallatie</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> 
 
    </div> 
 
    
 
    <div id="dienst3" class="diens"> 
 
     <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> 
 
    </div> 
 
</div> 
 
</body>