7

Tenho uma sequencia de DIVs sendo geradas por um script.
Gostaria que elas ficassem uma em baixo da outra e quando atingisse a altura máxima da div pai, elas entrariam do lado .

Atualmente colocando-as para flutuar à esquerda ficam assim:

[ 0 ] [ 1 ]
[ 2 ] [ 3 ]
[ 4 ] [ 5 ]
[ 6 ] [ 7 ]

Mas gostaria que elas ficassem assim:

[ 0 ] [ 4 ]
[ 1 ] [ 5 ]
[ 2 ] [ 6 ]
[ 3 ] [ 7 ]

Código até o momento:

<style>
     #pai{
        width: 500px;
        height: 300px;
     }

     .filhos{
        float: left;
        width: 200px;
     }
</style>

<div id="pai">     
     <? for($x=0;$x<24;$x++){ ?>
          <div class="filhos"><?=$x?></div>
     <? } ?> 
</div>

JSFiddle: https://jsfiddle.net/zgveahjp/

3

3 Respostas 3

3

Podes fazer isso da seguinte maneira com jQuery:

$(document).ready(function() {
    var divPai = $("#idPai");

    if (divPai.height() <= 200) {
        divPai.addClass("umaColuna").removeClass("duasColunas");
    } else {
        divPai.addClass("duasColunas").removeClass("umaColuna");
    }
});

Basicamente o que isto vai fazer é:

Se a div id="divPai" for menor ou igual a 400px de altura (ou seja lá qual for o valor que queiras que seja o valor máximo definido para a altura da div pai), vai adicionar uma classe chamada umaColuna ao #divPai:

<div id="divPai" class="umaColuna">

e se o valor for maior, adiciona uma classe duasColunas:

<div id="divPai" class="duasColunas">

Depois para fazermos a modificação e transação para dividirmos o conteúdo dentro do #divPai para que ele fique com uma ou duas colunas dependendo desta mudança de classes acima, basta criarmos o código CSS referente para as classes da seguinte forma:

/* Personaliza o espaçamento entre as colunas */
#idPai {
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 15px;
}

/* Divide o conteúdo dentro da #divPai em uma coluna */
.umaColuna {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}

/* Divide o conteúdo dentro da #divPai em duas colunas */
.duasColunas {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.classFilho {
    display: inline-block;
    width: 100%;
    height: 100px;
    background-color: #DDD;
    margin: 0 2px 15px 2px;
/* O código abaixo evita problemas de posicionamento das divs filhos */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

E o código HTML será algo como:

<div id="idPai">
    <div class="classFilho">0</div>
    <div class="classFilho">1</div>
    <div class="classFilho">2</div>
    <div class="classFilho">3</div>
</div>

Aqui tens um exemplo online no jsFiddle: http://jsfiddle.net/6sqmsLvv/
Clica no botão Adicionar nova div Filho no link do exemplo, para adicionar novas divs filho.

0

RESOLVIDO !
De acordo com o comentário do devgaspa.
Achei mais simples e como resolveu, nem testei outros métodos.
OBRIGADO

Usando a propriedade flex-box do css3 consegui fazer oque você precisa, porem o width da div pai não acompanha os filhos, é fixo, talvez de para arrumar isto. JSFiddle: jsfiddle.net/devgaspa/zgveahjp/2 Referência: desenvolvimentoparaweb.com/css/flexbox Can i use?: caniuse.com/#feat=flexbox – devgaspa

.pai {
    background: orange;
    
    display: flex;
    
    flex-direction: column;
    flex-wrap: wrap;
    
    height: 500px;
    width: 0px;
}

.filhos {
    border: 1px solid lightgray;
    box-sizing: border-box;
   height: 100px;
    width: 100px;
}
<div class="pai">     
    <div class="filhos">0</div>
    <div class="filhos">1</div>
    <div class="filhos">2</div>
    <div class="filhos">3</div>
    <div class="filhos">4</div>
    <div class="filhos">5</div>
    <div class="filhos">6</div>
    <div class="filhos">7</div>
    <div class="filhos">8</div>
    <div class="filhos">9</div>
    <div class="filhos">10</div>
</div>

-1

pra ele não passar de 300px coloque a tag

 max-height: 300px;
1
  • 1
    Realmente. Mas isso não soluciona o problema que estou enfrentando. Commented 3/11/2015 às 18:04

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 .