バナーの配置

質問

私のサイトでバナーをこの図１のように並べたいのですがうまくいきません

□□□□□□□　　□□□□□□□ 　　　
□□□□□□□　　□□広告２ □□　　　　　
□□広告１ □□　　□□□□□□□
□□□□□□□　　
□□□□□□□　　□□□□□□□
　　　　　 □□□□□□□　　□□広告 ３□□
　　　　　 □□□□□□□　　□□□□□□□

　　　　　　　　　　　　　　　図１　　

このようにプログラムを挿入するとこのような図２になります

失敗プログラム
<!-- 広告１ -->
<a href="http://px.a8.net/svt/ejp?a8mat=1TZBSV+BET46Q+AIM+77ZKH" target="_blank">
<img border="0" width="350" height="240" alt="" src="http://www28.a8.net/svt/bgt?aid=110823295690&wid=001&eno=01&mid=s00000001363001213000&mc=1"></a>
<img border="0" width="1" height="1" src="http://www14.a8.net/0.gif?a8mat=1TZBSV+BET46Q+AIM+77ZKH" alt="">
<!-- 広告１ -->

<!-- 広告２ -->
<a href="http://px.a8.net/svt/ejp?a8mat=1TZBSW+5RSAWI+1LI0+2NBPO1" target="_blank">
<img border="0" width="468" height="60" alt="" src="http://www25.a8.net/svt/bgt?aid=110823296349&wid=001&eno=01&mid=s00000007452016011000&mc=1"></a>
<img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=1TZBSW+5RSAWI+1LI0+2NBPO1" alt="">
<!-- 広告２ -->

<!-- 広告３ -->
<a href="http://px.a8.net/svt/ejp?a8mat=1TZB0O+5URGXE+NA2+64Z8X" target="_blank">
<img border="0" width="468" height="60" alt="" src="http://www22.a8.net/svt/bgt?aid=110822280354&wid=001&eno=01&mid=s00000003017001031000&mc=1"></a>
<img border="0" width="1" height="1" src="http://www18.a8.net/0.gif?a8mat=1TZB0O+5URGXE+NA2+64Z8X" alt="">
<!-- 広告３ -->

　　　　　 □□□□□□□　　 　　　
□□□□□□□　　　　
□□広告１ □□　　
□□□□□□□　　
□□□□□□□　　□□□□□□□
　　　　　 □□□□□□□　　□□広告２ □□
　　　　　 □□□□□□□　　□□□□□□□

□□□□□□□　　
　　　　　 □□広告３ □□　　
　　　　　 □□□□□□□

　　　図２

一様失敗の写真も添付しときます

回答No.1

kobliha

一週間も経っているので解決済みかどうかわからぬが。

画像というのは「インライン要素」と言って文字と同じ扱いのもの。
そして「無指定」の場合、その上下位置は文字で言うと、g, p, q, y などの上下に分かれるところ（これをベースラインという）が基準になっている。
即ち、画像は「下揃え」ということ。

つまり、あなたの意図に沿わせるためには「広告1」を左寄せにし、「広告2」と「広告3」を右に「回りこませる」ということになる。
これは記事中で画像の右にテキストを置くのと同じこと。

<!-- 広告１ -->
<a href="省略" target="_blank">
<img border="0" width="350" height="240" alt="" src="省略" style="float: left;"></a>

省略
<!-- 広告１ -->

<!-- 広告2 -->
<a href="省略" target="_blank">
<img border="0" width="468" height="60" alt="" src="省略" style="float: left;"></a>

省略
<!-- 広告2 -->
必要に応じ改行
<!-- 広告3 -->
<a href="省略" target="_blank">
<img border="0" width="468" height="60" alt="" src="省略" style="float: left;"></a>

省略
<!-- 広告3 -->
<br style="clear: both;" />
とすればよい。

ポイントは広告1に style="float: left;" を加え、広告3の下には「右の部分終わり」を意味することになる <br style="clear: both;" /> （回りこみ解除）を加える。

★ 日本語のマチガイ
「一様」は「イチヨウ」と読むが、意味が違う。
正しくは「イチオウ」と読む言葉で「一往」が本来だが、「一応」が慣用化されている。