html - 当浏览器调整大小时，父 div 高度随着其子元素的增长而增长

Question

我有一个 div，其中 tri-div child 水平对齐。当浏览器宽度变大时，这个 div 中的一个位于另外两个下方。当浏览器宽度较小时，三个 div 垂直对齐。以下是一些图片:

enter image description here

这是html代码:

<div id="tribox">
        <div id = "boxweb">
            <img src="../media/img/web.png">
              <p id = "title"><b>Siti Web</b><br/></p>
              <p id = "contenent">Figlio della maestra Franca Murolo e dell'operaio Giovanni Salvemini[5] che suonava in un gruppo musicale, Salvemini cominciò a cantare da bambino. Studiò ragioneria presso l'istituto tecnico di Molfetta, sebbene avesse voluto fare il fumettista. Ottenuto il diploma, decise di occuparsi di pubblicità e vinse una borsa di studio per l'Accademia di Comunicazione</p>
        </div>


        <div id = "boxsocial">
            <img src="../media/img/socialmedia.png" style="width: 180px; height: 180px;">
              <p id = "title"><b>Social Media</b><br/></p>
              <p id = "contenent">Figlio della maestra Franca Murolo e dell'operaio Giovanni Salvemini[5] che suonava in un gruppo musicale, Salvemini cominciò a cantare da bambino. Studiò ragioneria presso l'istituto tecnico di Molfetta, sebbene avesse voluto fare il fumettista. Ottenuto il diploma, decise di occuparsi di pubblicità e vinse una borsa di studio per l'Accademia di Comunicazione</p>

        </div>

        <div id = "boxapp">
            <img src="../media/img/app.png">
              <p id = "title"><b>Applicazioni</b><br/></p>
              <p id = "contenent">Figlio della maestra Franca Murolo e dell'operaio Giovanni Salvemini[5] che suonava in un gruppo musicale, Salvemini cominciò a cantare da bambino. Studiò ragioneria presso l'istituto tecnico di Molfetta, sebbene avesse voluto fare il fumettista. Ottenuto il diploma, decise di occuparsi di pubblicità e vinse una borsa di studio per l'Accademia di Comunicazione</p>
        </div>
    </div>

这是CSS代码:

#tribox{
width:1200px;
margin: 0 auto;
height: 100%;
margin-top: 50px;
text-align:center;

}

#boxsocial{
float: left;
width:400px;
text-align: center;}

    #boxsocial img{
        left: 0px;
        margin-left: 0px;
        margin-top: 5px;
 }


#boxweb{
display: inline-block;
width:400px;
text-align: center;}

    #boxweb img{
        left: 0px;
        margin-left: 0px;
        margin-top: 5px;
  }

 #boxapp{
float: right;
width:400px;
text-align: center;}

    #boxapp img{
        left: 0px;
        margin-left: 0px;
        margin-top: 5px;
 }

问题是在这个div下，我还有另一个div:

<div id ="secondbody">

</div>

CSS:

#secondbody {
position: relative;
height: 700px;
width: 100%;
background-color: #22a1c4;
}

当我调整浏览器大小时，第二个 div 覆盖第一个 div，这是因为第一个 div 的高度没有改变。我该怎么做才能使第二个 div 始终位于第一个 div 之下？

此刻我使用了具有特定宽度范围的@Media 函数，但恕我直言，此解决方案并不优雅和高效。抱歉英语不好。

Answer 1

你用 flexbox 试过吗？

您将两个主要的 div 放在一个 div 中并执行 display:flex; 和 flex-direction: column;

https://jsfiddle.net/wbo9uyb9/

.test{
  display:flex;
  flex-direction: column;
}
.treebox{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  
}

.box1{
  width:400px;
  text-align:center;
  color:red;
}
.box2{
  width:400px;
  text-align:center;
  color:green;
}
.box3{
  width:400px;
  text-align:center;
  color:blue;
}
.lastbox {
position: relative;
height: 700px;
width: 100%;
background-color: #22a1c4;
}

<div class="test">

<div class="treebox">
  <div class="box1">
  <img src="https://placehold.it/50x50">
              <p id = "title"><b>Applicazioni</b><br/></p>
              <p id = "contenent">Figlio della maestra Franca Murolo e dell'operaio Giovanni Salvemini[5] che suonava in un gruppo musicale, Salvemini cominciò a cantare da bambino. Studiò ragioneria presso l'istituto tecnico di Molfetta, sebbene avesse voluto fare il fumettista. Ottenuto il diploma, decise di occuparsi di pubblicità e vinse una borsa di studio per l'Accademia di Comunicazione</p>
  </div>
  <div class="box2">
  <img src="https://placehold.it/50x50">
              <p id = "title"><b>Applicazioni</b><br/></p>
              <p id = "contenent">Figlio della maestra Franca Murolo e dell'operaio Giovanni Salvemini[5] che suonava in un gruppo musicale, Salvemini cominciò a cantare da bambino. Studiò ragioneria presso l'istituto tecnico di Molfetta, sebbene avesse voluto fare il fumettista. Ottenuto il diploma, decise di occuparsi di pubblicità e vinse una borsa di studio per l'Accademia di Comunicazione</p>
  </div>
  <div class="box3">
  <img src="https://placehold.it/50x50">
              <p id = "title"><b>Applicazioni</b><br/></p>
              <p id = "contenent">Figlio della maestra Franca Murolo e dell'operaio Giovanni Salvemini[5] che suonava in un gruppo musicale, Salvemini cominciò a cantare da bambino. Studiò ragioneria presso l'istituto tecnico di Molfetta, sebbene avesse voluto fare il fumettista. Ottenuto il diploma, decise di occuparsi di pubblicità e vinse una borsa di studio per l'Accademia di Comunicazione</p>
  </div>
</div>
<div class="lastbox">
  
  </div>