当浏览器调整大小时，父div的高度会随着其子级的增长而增加。

Question

我有一个div和三div孩子水平对齐。当浏览器宽度为chenge时，这个div中的一个位于另两个下面。当浏览器宽度较小时，三个div垂直对齐。以下是一些图片：

在这里输入图像描述

以下是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 id ="secondbody">

</div>

Css：

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

当我调整浏览器的大小时，第二个div会超过第一个div，这是因为第一个div的高度没有改变。我怎么能做到第二个div总是在第一个div之下？

目前，我已经使用了具有特定宽度范围的@Media函数，但是这个解决方案并不是优雅和有效的IMHO。很抱歉英语不太好。

Answer 1

你用柔性盒试过吗？

将两个主div放在一个div中，然后执行display:flex;和flexdirection: 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>

​