November 18
Wrapping una sezione DIV con HTML e CSS codice consente di creare un effetto visivo, che riviste e giornali usano comunemente, in cui il testo circonda un'immagine. Un DIV rappresenta un tag <div>, che definisce una sezione o divisione in un file HTML. Eseguire l'effetto di avvolgimento con la creazione di due classi CSS che utilizzano la proprietà "fluttuante" e hanno dimensioni fisse. È quindi necessario posizionare accuratamente le due classi intorno alla vostra contenuti nel corpo del file HTML.
1 Aprire il file HTML in un editor di testo come Blocco note di Windows.
2 Aggiungere il seguente codice CSS nella sezione <head> del file HTML per gestire le proprietà di stile dell'area del contenuto avvolto:
<Style type = "text / css">
p {text-align: justify; line-height: 18px;}
.mywrapdiv {width: 350px; padding: 0 6px; float: left;}
.mycontent {width: 180px; altezza: 150px; padding: 6px; float: right;}
</ Style>
La linea "p" imposta le proprietà di stile per il testo che avvolge intorno al vostro contenuto. La linea ".mywrapdiv" imposta le proprietà di stile per la sezione esterna <div> che contiene entrambe le aree di contenuto al suo interno. La linea "MyContent" imposta le proprietà di stile per il contenuto che si desidera avvolgere intorno. La parte importante del codice è quello di impostare le proprietà "float" per entrambe le classi e per specificare una larghezza fissa e altezza per l'area contenuto da avvolgere intorno.
3 Aggiungere il codice HTML per gestire l'area del contenuto di avvolgimento digitando il seguente codice all'interno del corpo del file HTML:
<Div class = "mywrapdiv">
<P> Area Content # 1 ----- un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere intorno. <Span class = "MyContent"> zona contenuto # 2 </ span> un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere intorno un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere un testo per avvolgere intorno ad alcuni </ p >
</ Div>
A <div> è un elemento a livello di blocco, quindi non è possibile includere all'interno di una sezione <p>. Un tag <span> è consentito perché è definita in linea anziché a livello di blocco.
4 Salvare il file HTML e caricarlo sul server per visualizzare l'area del contenuto di avvolgimento.