Parent div höhe wachsen mit dem growt seiner kinder whern browser resize

Question

Ich habe ein div mit tri-div kind horizontal ausgerichtet. Wenn die Browserbreite geändert wird, geht eine dieser div unter die anderen zwei. Wenn die Browserbreite geringer ist, sind die drei Divs vertikal ausgerichtet. Hier sind einige Bilder:

enter image description here

hier ist der HTML-Code:

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

Hier ist die CSS-Code:

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

Das Problem ist, dass unter diesem div, ich habe ein anderes div:

<div id ="secondbody"> 

</div> 

Css:

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

Wenn ich den Browser der zweite div geht über die erste div Größe ändern, dies, weil die Höhe des ersten div nicht ändert. Wie kann ich das tun, dass das zweite div immer unter dem ersten div ist?

In diesem Moment habe ich die @Media-Funktion mit bestimmten Breitenbereich verwendet, aber diese Lösung ist nicht elegant und effizient IMHO. Sorry für das schlechte Englisch.

Answer 1

Haben Sie es mit der Flexbox versucht?

Sie die beiden Haupt div in einem div setzen und tun display:flex; und 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>