ネット調べてるとiframe等を使ったアフィリエイトのリンクがあるかと思います。
一般に、HTMLで<br>等がなければそのライン上を続けて表示と思いますが、
Amazonのアフィリエイトのリンクは以下のように縦で表示されてしまいます。
ネット上で結構調べている方がいるみたいなので、当サイトでの方法を展開したいと思います。
上記を記述したhtmlコード
<iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=jforf-22&o=9&p=8&l=as1&asins=B009LGO26W&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=jforf-22&o=9&p=8&l=as1&asins=B008DRIR20&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
で、これを横並びにするには、
ソースコードはこちら
<div style="display: inline-block; _display: inline;"><iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=jforf-22&o=9&p=8&l=as1&asins=B009LGO26W&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div> <div style="display: inline-block; _display: inline;"><iframe style="width: 120px; height: 240px;" src="http://rcm-jp.amazon.co.jp/e/cm?t=jforf-22&o=9&p=8&l=as1&asins=B008DRIR20&ref=qf_sp_asin_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" height="240" width="320" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div>
コードを見てもらえば分かると思いますが、<div></div>で<iframe>部分を囲ってやるだけ。
ポイントとなっているのが、styleとして設定している、display: inline-block; と _display: inline; が今回のミソになります。
<iframe>部分を<div>でボックス化、あとは並び方をボックスが隣り合うようにdisplay: inline-block;（IE6も考えてやるなら_display: inline;も記載）することで完成～♪となります。
これ使ったWebページがこちらにありますので、参考にしてみてください。
↓↓こちらの記事もどうぞ↓↓
こんにちは、検索で発見して拝見しました。できました！ありがとうございます。困ってたんです。
Gatos Aptさん はじめまして。本投稿が役に立って良かったです。