Hvordan lage en DIV Wrap Around innhold

Innpakning en DIV seksjon med HTML og CSS-koden kan du lage en visuell effekt, som magasiner og aviser vanligvis bruker, hvor teksten omkranser et bilde. En DIV representerer en <div> tag, som definerer en seksjon eller avdeling i en HTML-fil. Utfør innpakning effekt ved å opprette to CSS klasser som bruker den "flytende" eiendom og har faste dimensjoner. Deretter må nøye plassere de to klassene rundt innholdet i kroppen av HTML-fil.

Bruksanvisning

1 Åpne HTML-filen i et tekstredigeringsprogram som Windows Notisblokk.

2 Legg til følgende CSS-kode i <head> -delen av HTML-fil for å håndtere stilegenskapene i innpakket innholdsområdet:

<Style type = "text / css">

p {text-align: rettferdiggjøre; line-height: 18px;}

.mywrapdiv {width: 350 piksler; padding: 0 6PX; float: left;}

.mycontent {width: 180px; height: 150px; padding: 6px; float: right;}

</ Style>

Den "p" linjen setter stilegenskaper for tekst som flyter rundt innholdet. Den ".mywrapdiv" linje setter stilegenskapene for den ytre <div> delen som inneholder både innholdsområder inni den. Den "mycontent" linje setter stilegenskapene for det innholdet du ønsker å vikle rundt. Den viktigste delen av koden er å sette de "float" egenskaper for begge klasser, og for å angi en fast bredde og høyde for innholdet området du ønsker å vikle rundt.

3 Legge til HTML-kode for å håndtere innpakning innholdsområdet ved å skrive inn følgende kode i hoveddelen av HTML-filen:

<Div class = "mywrapdiv">

<P> Innhold Area # 1 ----- litt tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt. <Span class = "mycontent"> Content Area # 2 </ span> litt tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen tekst å vikle rundt noen </ p >

</ Div>

En <div> er en blokk-nivå element, slik at du kan ikke ta den med i en <p> -delen. En <span> tag er tillatt fordi det er definert inline i stedet for blokknivå.

4 Lagre HTML-fil og laste den opp på serveren din for å se innpakning innholdsområdet.