- ベストアンサー
RSSでURLに文字列を追加と配置
- 現在googleのAPIを使いRSSからURLと画像を取得しています。URLの末尾に指定した英数字を付加し、画像のレイアウトを４×4に変更したいですがうまくできません。
- 複数のURLの取得時、どの段階でどのように振り分ければ良いのか分かりません。
- CSSでレイアウトを試みましたが、一括で処理されるため途中での区切りでの配置ができません。複数の画像の振り分け方もわかりません。
- Cronus2
- お礼率46% (28/60)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
最終的なHTMLを確認してみればわかると思いますが、container（ ＝<div id="feed" ></div> ）の中に、 <div id="feed" > <p><a href="link1"><img src="gazo1" alt="alt1"></a></p> <p><a href="link2"><img src="gazo2" alt="alt2"></a></p> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </div> のようなソースが追加された形になっているはずです。 このままでも、CSSで #feed p のサイズを指定してfloat:leftなどとしておき、div#feedの幅をその４倍に設定しておくことで4列のレイアウトになると思います。 画像のサイズが指定のサイズより大きかったりすると、レイアウトが乱れる原因となるので、overflowを設定しておくか、先にタグ内でサイズを指定しておくか、あるいはスクリプトで個々にサイズを調整するかなどが必要かも知れません。 文章の段落ではなくなるので、マークアップは<p>よりも <ul> <li><a href="link1"><img src="gazo1" alt="alt1"></a></li> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </ul> などの方が一般的かも知れません。 まあ、リストにしなくても<div>～</div>でもよいのかも。 おすすめではありませんが、<table>を利用して表示すれば、サイズ調整などをしなくても確実に4×4にできるという意味では簡単かも知れません。 他の考え方としては、現状の縦一列の表示を4個ごとに<div>でくくっておいて、これをフロートさせるというのもありかと。 見え方としては、１番目から順に横に並んでゆくのと、縦に並んでゆくのの違いとなります。
お礼
回答ありがとうございます。 サイズ指定とoverflowを使えばよかったんですね。 float:leftで回りこみまでは出来たんですが、 そのあと、どうやって折り返せば?と悩んでいました。 英数字を付加は自己解決しましたw 寝しなにすると頭が回りが悪かったようでw ありがとうございました<m(__)m>