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

Question

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

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

Спасибо!

PS. я не хочу, чтобы я не использовал таблицы.

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 для каждого.