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

时间：2017-04-10 18:43:10

标签： html css position css-float

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

5 个答案:

答案 0 :(得分：1)

将display: flex添加到父级，然后移除margin-left上的巨大#dienst2 - 或者不要，不是必需的，但我做了，因为您希望他们在旁边另一个。放在它们旁边的任何其他元素都将显示在同一行中。

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

答案 1 :(得分：0)

您应该添加display：inline;并删除margin 

php artisan migrate

答案 2 :(得分：0)

你只需要添加

position: relative;
display: inline-block;

到孩子div和

position: absolute;

到父div。这是一个工作示例（并排有3个段落 - 我减小了宽度，以便您可以在小窗口中看到它们）。如果需要，您也可以删除或减少保证金。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

Divs最初是块级元素。除其他外，这意味着它们各自出现在自己的行上。有两种方法可以将两个div放在一起。您选择哪一个将达到您想要的效果（和副作用）。以下是一些选项：

  • 浮动他们（float: left）
  • 将它们设为内嵌块（display: inline-block）
  • 使用flexbox（将display: flex应用于其父级）
  • 制作网格项目（将display: grid应用于其父级;非常新的功能并需要回退）

我建议您阅读CSS布局方法。每种方法都是一种有用的工具，没有一种方法是一种通用的解决方案。你应该尝试熟悉它们。一个很好的入门资源是learnlayout.com。一旦掌握了基础知识，如果您想深入了解，可以查看my book。

答案 4 :(得分：0)

如果要在彼此旁边添加3个div，则需要减小每个div的宽度。

除非你的目标受众是大型桌面用户，否则每个人都要工作500px;

无论如何，我将它的高度和宽度减少到300px，然后溢出到 滚动y轴。

如果要删除滚动条。 （删除overflow-y：scroll;以及所有样式）并指定高度，以便所有div的内容都可见）

以全屏模式查看（Stackoverflow强制调整大小）

*{
  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
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

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


.diens::-webkit-scrollbar-thumb
{
	background-color: #373737;
	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>

相关问题
最新问题