CSS の Clear 属性を使用して広告テキストの折り返し効果を実現します

大きなウェブサイトの広告は、コンテンツの真ん中にテキストを囲むように配置されているのを見たことがありますか? 一般的な小さなウェブサイトの広告は、コンテンツの最初か最後にしか配置できません。おそらく、大きなウェブサイトの cms システムはそうしているのでしょう。小規模Webサイトでよく使われるCMSの基本 この機能はありません。コンテンツタグに広告タグを自動的に追加するのは、記事追加時に手動で編集しない限り不可能です。面倒ではありません。

CSS を使用して制御することを考えたこともありませんでした。主な理由は、clear 属性を期待していなかったので、今日偶然紹介を見て、テキストの折り返しを実装するのが非常に簡単であることに気づきました。

コード例:

<div class="ニュース">
<div style="float:left;height:300px;width:0">幅 0 の空のレイヤー。このレイヤーの高さを使用して広告レイヤーの上部と下部の位置を制御します。</div>
<div style="float:left;height:250px;width:250px;clear:left;">広告コード</div>
</div>

重要なのは、clear:left の役割にあります。clear:both、clear:left、clear:right の 3 つの属性があり、それぞれ左右のフローティング ブロックをクリアすることを示します。広告レイヤーに clear:left を追加すると、レイヤーは空白のレイヤーに対して浮かなくなり、下に移動します。これは素晴らしいことです (笑)。

比較してみましょう:

<div class="ニュース">
<div style="float:left;height:300px;width:100px;background:#CCC;">効果を観察しやすくするために幅と背景を追加します</div>
<div style="float:left;height:250px;width:250px;">透明なフロートを削除すると、その意味がわかります</div>
</div>

これを追加すると:

<style>.news img,.news table{clear:both;}</style> //コンテンツ内の写真や表が広告を覆わないようにする

残念ながら、上記のテストでは、Firefox と Opera でのみ異なる結果が得られました。IE では、広告レイヤーに遭遇すると画像が自動的に下に移動しますが、広告レイヤーはカバーされません。オペラでは広告レイヤーが前面にあるため、画像が下に移動せずに広告レイヤーを覆ってしまうのが面白いです。

再び改善されました:

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //写真と表が自動的に下部に表示されるようにする

ついに完成しました。かなり完璧で、周囲の広告コンテンツのエフェクトも完成しました :)

//2008-02-29、修正者:

追加するのを忘れた

テキストを右上と右下で折り返しるべきかという質問があったので、次のように変更しました。