Obtenez l'image pour être placé à droite rubis sur rails

Question

Je développe actuellement une petite photo cms pour un ami, elle utilise Flickr, de sorte que ce que j'utilise pour obtenir les images, ou j'utilise un bijou appelé Flickraw. Je dois d'une façon ou d'une autre savoir quand l'image est une troisième rangée sur trois, et la deuxième sur trois, et ainsi de suite. Voici une capture d'écran qui illustre ce qu'il fait. (désolé à ce sujet est le danois)

Alors basiquement je veux l'image du milieu soit au milieu, à gauche à gauche, et le droit à droite. j'ai lik 8 lignes .. et c'est dynamique.

Merci!

PS. Je ne veux pas autant que possible de ne pas utiliser les tables.

Answer 1

Voici ma suggestion.

HTML

<div class="photo-row"> 
    <div class="photo">Left</div><div class="photo">Center</div><div class="photo">Right</div> 
</div> 

CSS

.photo-row .photo { 
    background-color: rgb(230,230,230); 
    display: inline-block; 
    vertical-align: middle; 
    width: 33.33% 
} 
.photo-row .photo:nth-child(1) { text-align: left; } 
.photo-row .photo:nth-child(2) { text-align: center; } 
.photo-row .photo:nth-child(3) { text-align: right; } 

Exemple: http://jsfiddle.net/xYZjL/

C'est si vous n'avez pas de contrôle sur les images et en ajoutant les noms de classe. Si vous avez le contrôle, il serait plus sûr d'utiliser les noms de classe à la place de nth-child.

Answer 2

Vous créez dynamiquement la page, vous pouvez donc avoir l'élément HTML pour chaque première image ont class="first", chaque seconde class="second" et chaque troisième class="third".

Ensuite, vous pouvez utiliser CSS pour définir les règles de disposition float et clear pour chacun.