Several Divs with the same responsive Height

Question

Several Divs with the same responsive Height

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I have four five divs, one of which is a container for the other four. Structure:

<div id="divPai" style="width:100%">
    <div id="divInfUser" style="width:25%; height: 30%; background-color: #DCAE4C; float: left; display: inline-block;padding: 10px;">
         <ul>
             <li></li>
             <li></li>
             <li></li>
         </ul>
    </div>

    <div id="divFoto" style="width:25%; height: 30%; background-color: #ECEDEF; float: left; display: inline-block;padding: 10px;text-align: center;">
    </div>

    <div id="divLogo" style="width:25%; height: 30%; background-color: #ECEDEF; float: left; display: inline-block;padding: 10px;">
    </div>

    <div id="divInf" style="width:25%; height: 30%; background-image: linear-gradient(45deg, #5B5B5F, #868589);; float: left; display: inline-block;padding: 10px;">
            <ul>
             <li></li>
             <li></li>
             <li></li>
         </ul>
    </div>
</div>

The divs of the laterias will be the same size because of li but the middle divs will have another type of information. If I set the fixed height value, the UL will exit the div when the resolution decreases. I need all the child divs to have the same height at the beginning and when it is adapting to other resolutions it grows together so the UL does not get out of the divs

html html5 css css3 layout-responsivo

asked by anonymous 22.10.2014 / 16:01

2 answers

2

Have you looked into this here?

link

A little more about the flexbox ... No CSS-TRICKS: link Full documentation: link

I also advise you to take a look at browser support before.

23.10.2014 / 13:18

How to make an algorithm to convert case to lowercase? How to know which form id a function is being sent to?

score 3 · Accepted Answer

I made some changes to the id of the html, to better reference in css:

<div class="divPai container">
<div class="content caixa">
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</div>

<div class="content caixa">
 <p>Caixa 2</p>
</div>

<div class="content caixa">
 <p>Caixa 3</p>
</div>

<div class="content caixa">
        <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</div>

and css:

.divPai {
font-size: 0;
}
.content {
display: inline-block;
float:left;
font-size: 1rem;
}
.caixa {
box-sizing: border-box;
padding: 5px;
width: 25%;
min-height:100px;
}
.container {
margin: 10px;
}
.content:nth-child(1){background:#DCAE4C;}
.content:nth-child(2){background:#ECEDEF;}
.content:nth-child(3){background:#ECEDEF;}
.content:nth-child(4){background:linear-gradient(45deg, #5B5B5F, #868589);}