父div的高度隨其子ween瀏覽器調整大小而增長

Question

我有一個與tri-div子水平對齊的div。當瀏覽器寬度趨於正常時，其中一個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的heigth不會改變。我怎麼能做第二個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>