Haben Sie gesehen, dass die Werbung auf großen Websites in der Mitte des Inhalts platziert wird, um den Text zu umschließen? Im Allgemeinen kann die Werbung auf normalen kleinen Websites nur am Anfang oder am Ende des Inhalts platziert werden. Möglicherweise ist dies beim CMS-System der Fall Diese Funktion wird häufig von unseren kleinen Websites verwendet. Es gibt keine solche Funktion, da es nicht möglich ist, automatisch ein Werbe-Tag zum Inhalts-Tag hinzuzufügen, es sei denn, Sie bearbeiten es manuell, wenn Sie einen Artikel hinzufügen, was nicht ermüdend ist.
Ich habe nie darüber nachgedacht, CSS zur Steuerung zu verwenden, hauptsächlich weil ich das Clear-Attribut nicht erwartet hatte. Ich habe heute zufällig eine Einführung gesehen und festgestellt, dass es so einfach ist, Textumbruch zu implementieren.
Codebeispiel:
<div style="float:left;height:300px;width:0">Eine leere Ebene mit einer Breite von 0, wobei die Höhe dieser Ebene verwendet wird, um die obere und untere Position der Werbeebene zu steuern</div>
<div style="float:left;height:250px;width:250px;clear:left;">Werbecode</div>
</div>
Der Schlüssel liegt in der Rolle von „clear:left“. „Clear“ hat drei Attribute: „clear:both“, „clear:left“ und „clear:right“, die jeweils das Löschen der schwebenden Blöcke auf beiden Seiten, links und rechts, anzeigen. Das Hinzufügen von „clear:left“ zur Werbeebene bedeutet, dass die Ebene nicht mehr relativ zur leeren Ebene schwebt und sich nach unten bewegt. Das ist großartig, haha.
Vergleichen wir:
<div style="float:left;height:300px;width:100px;background:#CCC;">Fügen Sie Breite und Hintergrund hinzu, um die Beobachtung des Effekts zu erleichtern</div>
<div style="float:left;height:250px;width:250px;">Wenn Sie den durchsichtigen Float entfernen, werden Sie seine Bedeutung verstehen</div>
</div>
Wenn Sie dieses hinzufügen:
Leider ergab der obige Test, dass nur IE für Firefox und Opera unterschiedliche Ergebnisse liefert. Der Effekt von IE besteht darin, dass das Bild beim Auftreffen auf die Werbeebene nicht nach unten verschoben wird weil die Werbung Die Ebene befindet sich im Vordergrund. Das Bild wird nicht nach unten verschoben und verdeckt die Werbeebene.
Nochmals verbessert:
Endlich ist es fertig, es ist ziemlich perfekt und die Wirkung der umgebenden Werbeinhalte ist jetzt vollständig :)
//29.02.2008, geändert von: Was ist
Ich habe vergessen hinzuzufügen
| <style>.news{float:left;}</style> |
Jemand hat gefragt, ob der Text oben und unten rechts umbrochen werden soll, also habe ich ihn wie folgt geändert:
<div style="float:left;"> </div> |