Get the image to be placed right ruby on rails

I'm currently developing a small photo cms for a friends, she uses Flickr, so that what i use to get the images, or i use a gem called F开发者_运维百科lickraw. I have to somehow know when the image is a third in a row out of three, and the second out of three, and so on. Here's an screenshot which illustrates what it does.

So basicly i want the middle image to be in the middle, the left to the left, and the right to the right. i have lik 8 rows .. and it is dynamicly.

Thank you!

PS. i wan't as much as possible to not use tables.

Here is my 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; }

Example: http://jsfiddle.net/xYZjL/

That's if you don't have control over the images and adding class names. If you DO have control you'd be safer to use class names in place of nth-child.

You are dynamically creating the page, so you can have the HTML element for each first image have class="first", each second class="second" and each third class="third".

Then you can use CSS to define float and clear layout rules for each.