estou com um problema para da espaço em algumas divs, segue código abaixo:
HTML:
<div id="feira">
<div class="barraca"></div>
<div class="barraca"></div>
<div class="barraca"></div>
</div>
CSS:
#feira{
position: fixed;
right: 0;
bottom: 0;
z-index: 55;
width: 80%;
}
.barraca{
position: absolute;
right: 0;
bottom: 0;
background: #AAA;
width: 250px;
height: 200px;
}
Agora para deixar as barracas separadas estou usando esse algoritmo em Jquery, mas não está dando certo, pois a 2º barraca ele fala que tem o left: 0; e uma das barraca fica atras da outra.
Jquery:
function organizar(){
qtdJanela = $(".barraca").size();
if(qtdJanela > 1){
for(c = 0; c < qtdJanela; c++){
janela = $(".barraca").eq(c);
posJanela = janela.position();
distancia = posJanela.left;
alert(distancia);
$(".barraca").eq(c+1).css({'right':distancia+'px'});
}
}
}
Tem uma hora que ele apresenta 0 no distancia.
position: fixed;
nãorelative;
.bottom: 0px
nadiv
pai que éfixed
vai ficar no footer. De uma olhada neste exemplo que fiz no jsFiddle. Você também pode optar pela especificação flexible box