Criação de colunas com tamanhos dinâmicos

[soamazing 0]

Olá Galera,

Estou precisando de uma ajuda de vocês!

 

Preciso criar um código css que comporte no máximo três colunas por linha, sendo que o tamanho dessas colunas devem ser dinâmicos.

 

Seria algo mais ou menos assim:

 

Obrigada pela ajuda galera!

[heyalves 3]

Use um sistema de grid.

[angelorubin 142]

Alguns Frameworks que podem lhe ajudar em sua necessidade - http://usablica.github.io/front-end-frameworks/compare.html

 

Tem a Flexbox também - http://css-tricks.com/snippets/css/a-guide-to-flexbox

 

Espero que ajude.

[Electronic 124]

Usar um framework só pra isso é meio exagero

veja se te serve

http://jsfiddle.net/1gzb5x8e/

<div class="boxes">
    <div class="d1">111</div>
    <div class="d2">222</div>
    <div class="d3">333</div>
    <div class="d4">444</div>
    <div class="d5">555</div>
    <div class="d6">666</div>
</div>

.boxes > div {
    background:blue;
    height:100px;
    margin-bottom:10px;
    color:#fff;
}
.d2 {
    width: 49%;
    float: left;
}
.d3 {
    width: 49%;
    float:right;
}
.d4 {
    width: 31.5%;
    float: left;
}
.d5 {
    width: 31.5%;
    margin-left: 3%;
    float: left;
}
.d6 {
    width: 31.5%;
    float: right;
}

[soamazing 0]

 

Usar um framework só pra isso é meio exagero

veja se te serve

http://jsfiddle.net/1gzb5x8e/

<div class="boxes">
    <div class="d1">111</div>
    <div class="d2">222</div>
    <div class="d3">333</div>
    <div class="d4">444</div>
    <div class="d5">555</div>
    <div class="d6">666</div>
</div>

.boxes > div {
    background:blue;
    height:100px;
    margin-bottom:10px;
    color:#fff;
}
.d2 {
    width: 49%;
    float: left;
}
.d3 {
    width: 49%;
    float:right;
}
.d4 {
    width: 31.5%;
    float: left;
}
.d5 {
    width: 31.5%;
    margin-left: 3%;
    float: left;
}
.d6 {
    width: 31.5%;
    float: right;
}

Olá amigo,

Obrigada por sua resposta, porém os dados são dinâmicos, isso quer dizer que eu não sei quantos d-N eu deveria criar no meu css entendeu?

Pessoal a solução foi meia complicada mas eu consegui resolver, vou tentar descrever aqui o que eu fiz:

 

Tive que fazer uma validação com relação ao total de cadastros, se for um, eu carrego uma classe, se for dois uma outra classe e o padrão é quando os dados forem mais que dois.

 

Depois disso eu utilizo o :nth-child(4n+1) para adicionar a margin-right para não ficar grudado.

 

Muito obrigada pela respostas de todos.