Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://s17.postimg.org/pmg5tp03z/question.jpg&key=7f26171d4d96bd46914a1a0b8fba7d25353eb4a3469ecda6be5bc8649d3d0109" alt="question.jpg" />
Obrigada pela ajuda galera!
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.
Usar um framework só pra isso é meio exagero
veja se te serve
<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;
}>
Usar um framework só pra isso é meio exagero
veja se te serve
<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.
Use um sistema de grid.