親divの高さが子どもの成長と共に大きくなるwhernブラウザのサイズが変更されました

Question

私はtri-div子を持つdivを水平に並べました。ブラウザの幅がchengeのとき、このdivの1つは他の2つの下になります。ブラウザの幅が小さくなると、3つの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; 
} 

私は2番目のdivは、最初のdivの上に行くのブラウザのサイズを変更し、この最初のdivのheigthは変更されませんので。どのように私は2番目のdivは常に最初のdivの下にあることを行うことができますか？

この時点では、特定の幅の範囲で@Media関数を使用しましたが、このソリューションはエレガントで効率的なIMHOではありません。 悪い英語を歓迎します。

Answer 1

フレックスボックスで試しましたか？

使用すると、1つのdivに二つの主要なdiv要素を入れてdisplay: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>