楽天アフィリエイトバナーを横に並べる方法

広告

楽天のバナーを横に並べる方法

楽天バナー

通常の配置では横には並ばず、縦1列に並びます。

横並びのバナー

<div style=”float:left;padding-right:1px;”>広告</div>

<div style=”float:left;padding-right:1px;”>広告</div>

<div style=”float:left;padding-right:1px;”>広告</div><div style=”clear:both;”>

3列表示はdiv囲って、3つ目のバナーで<div style=”clear:both;”>で回り込みを解除します。

他のサイトでは最後の部分を<div style=”clear:both;”></div>と表記していますが、私のサイトでは表示が崩れてしまったので</div>で閉じた後にclear:bothを入れています。

iphoneSEでの表示

他のサイトではpadding-right:10pxと余白が10PXと指定していましたが、当サイトでは幅の指定から溢れるので、1PXとしています。

これでiphoneSEでも横並びの3列で表示されています。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする