本記事は広告およびアフィリエイトプログラムによる収益を得ています
横並び
<div style="float:left;padding-right:10px;">
アフィリエイト
</div>
<div style="float:left;padding-right:10px;">
アフィリエイト
</div>
<div style="float:left;padding-right:10px;">
アフィリエイト
</div>
<div style="clear:both;"></div>
この例だと、横並びに3つです。
横幅が足りない場合は、自動的に折り返されます。
<div style="clear:both;"></div>
は最後に挿入してください。そこで横並びが改行されるイメージです。
その下にまた同じように上記のコードを書けば、2段組みになります。
左寄せ、文章回り込み
<div style="float:left;padding:10px;">
アフィリエイト
</div>
本文
<div style="clear:both;"></div>
回り込みを解除したいところで
<div style="clear:both;"></div>
を挿入
右寄せ、文章回り込み
<div style="float:right;padding:10px;">
アフィリエイト
</div>
本文
<div style="clear:both;"></div>
回り込みを解除したいところで
<div style="clear:both;"></div>
を挿入
サンプル例 :楽天のアフィリエイト 横並び
【送料無料】よくわかるHTML5+CSS3の教科書 [ 大藤幹 ] |
【送料無料】現場のプロがやさしく書いたWebサイト運営・プロデュースの教科書 [ 松尾茂起 ] |
¥ 864 (楽天の価格)
サンプル例 :Amazonアフィリエイト 左寄せ
¥ 864 (楽天の価格)
実現できたらなんでもいいと思うけど
テーブルタグを使用する方法などもありますが、個人的にはちょっと面倒だと思います。テーブルタグの場合は、回り込みの解除?みたいなのが必要ないので、はまりにくいとは思います。
スポンサーリンク
コメントを残す