Skip to main content
adicionou 22 caracteres ao conteúdo
Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57

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 maiormenor 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 menormaior, adiciona uma classclasse 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/5z9eLyvb/http://jsfiddle.net/6sqmsLvv/
Clica no botão Adicionar nova div Filho no link do exemplo, para adicionar novas divs filho.

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 maior ou igual a 400px (ou seja lá qual for o valor que queiras que seja o valor máximo para a altura da div pai), vai adicionar uma classe chamada umaColuna ao #divPai

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

e se o valor for menor, adiciona uma class 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/5z9eLyvb/
Clica no botão Adicionar nova div Filho no link do exemplo, para adicionar novas divs filho.

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.

Fonte Link
Chun
  • 7,5mil
  • 4
  • 32
  • 57

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 maior ou igual a 400px (ou seja lá qual for o valor que queiras que seja o valor máximo para a altura da div pai), vai adicionar uma classe chamada umaColuna ao #divPai

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

e se o valor for menor, adiciona uma class 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/5z9eLyvb/
Clica no botão Adicionar nova div Filho no link do exemplo, para adicionar novas divs filho.