Question

我有一个tri-div子水平对齐的div。当浏览器宽度变化时，这个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下，我有另一个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/

＆＃13;

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

＆＃13;

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

＆＃13;

随着孩子们的浏览器调整大小，父母div高度增长

1 个答案: