2

Tenho quatro cinco divs, sendo que uma delas é um container para as outras quatro. Estrutura:

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

As divs das laterias vão ter o mesmo tamanho por causa dos li mas as do meio terão outro tipo de informação. Se eu setar valor de height fixo o UL vai sair da div quando for diminuindo a resolução. Preciso que todas as divs filhas tenham a mesma altura no começo e quando for se adaptando a outras resoluções ela vá crescendo junto para que os UL não saiam fora das divs

1
  • 3
    Já testou min-height ?
    – Sergio
    Commented 22/10/2014 às 14:08

2 Respostas 2

3

Fiz algumas alterações no id do html, para melhor referenciar no 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>

e o 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);}
2

Já deu uma olhada nisso aqui?

http://codepen.io/chriscoyier/pen/zlntC

Um pouco mais sobre o flexbox... No CSS-TRICKS: http://css-tricks.com/using-flexbox/ Documentação completa: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Aconselho também dar uma olhada no suporte dos browsers antes.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .