Получите изображение, которое будет размещено справа рубином на рельсах

Question

В настоящее время я разрабатываю небольшое фото cms для друзей, она использует Flickr, так что я использую для получения изображений, или я использую драгоценный камень под названием Flickraw. Мне нужно как-то узнать, когда изображение третье подряд из трех, а второе из трех и так далее. Вот скриншот, который иллюстрирует, что он делает. (жаль это датском)

Так основно я хочу среднее изображение, чтобы быть в середине, слева налево, а справа вправо. У меня есть 8 строк ... и это динамично.

Спасибо!

PS. i wan't как можно больше не использовать таблицы.

Answer 1

Вот мое предложение.

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; } 

Пример: http://jsfiddle.net/xYZjL/

Это, если вы не имеете контроля над изображениями и добавление имен классов. Если у вас есть контроль, вы бы безопаснее использовать имена классов вместо nth-child.

Answer 2

Вы динамически создаете страницу, чтобы вы могли иметь элемент HTML для каждого первого изображения: class="first", каждую секунду class="second" и каждую третью class="third".

Затем вы можете использовать CSS для определения float и clear правил размещения для каждого.