2010-11-27 16 views
0

私は現在、友人のための小さな写真CMSを開発しています。彼女はFlickrを使用しています。私はイメージを取得するために使うか、Flickrawという宝石を使います。私は何とか、画像が3つの行のうちの3番目の行であり、3番目のうち2番目のものであることなどを、いつか知る必要があります。ここには、それが何をしているかを示すスクリーンショットがあります。 Screen Shot (それについて申し訳ありませんが、デンマーク語である)イメージを右に置くイメージを得る

のでbasicly私は真ん中の画像は、中央、左、左、右に右になりたいです。私は好きな8行を持っている..それは動的にです。

ありがとうございました!

PS。できるだけテーブルを使わないようにしません。

+0

これらの画像はどのような種類のコンテナ(div、liなど)ですか? –

答えて

0

ここに私の提案があります。

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の代わりにクラス名を使用する方が安全です。

+0

ねえ、ありがとう!しかし、私は画像の下にいくつかのテキストがあります。魔女は直接下に置くべきです.. –

0

ページを動的に作成しているため、各最初の画像のHTML要素にはclass="first"、それぞれの秒はclass="second"、それぞれはclass="third"となります。

次に、CSSを使用してそれぞれにfloatclearのレイアウトルールを定義できます。

関連する問題