C# - Szöveg körbefolyatása egy tetszőleges tartalmú DIV körül

forráskód letöltése
Legyen két tetszőleges hosszúságú szövegünk. Azt szeretnénk megvalósítani, hogy az egyiket egy keretbe foglalva megjelenítjük a másikon belül úgy, hogy a kereten kívüli szöveg körbefolyik a kereten belüli szöveg körül.
A keretben (<DIV> tag) persze nem csak szöveg, hanem bármilyen tetszőleges HTML kód állhat, így akár kép, táblázat, stb. is.
Mivel a szövegek változó hosszúak lehetnek, így olyan megoldásra van szükségünk, hogy minden esetben a kívánt hatást érhessük el, így például nem használhatnánk táblázatot.
Mellékelt példa megnyitása előtt szükséges egy DivText nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A megoldás igen egyszerű: használnunk kell csupán a float nevű stílust annál a DIV-nél, melynél körbe akarjuk folyatni a körülötte lévő HTML tartalmat, jelen esetben szöveget.
A float-nak három értéke lehet:
  • none – alapeset, nincs körülfolyás
  • right – az objektumunk jobb oldalra kerül, az alatta lévő tartalom bal oldalán körülfolyik
  • left – az objektumunk bal oldalra kerül, az alatta lévő tartalom jobb oldalán körülfolyik
.panel
{
  float: right;
  background-color: #ccffcc;
  padding: 8px;
  margin: 8px;
  border: solid #80E080 4 px;
}