In questo articolo, analizzeremo le opzioni su come far avvolgere il testo attorno a un'immagine. Ci sono diversi modi in totale. Consideriamo ciascuno di essi. Per iniziare, ti consiglio di leggere il tag html dell'articolo avere una conoscenza di base delle immagini nelle pagine html.

1. Avvolgimento con stili di tag

L'immagine può essere allineata solo operando con stili di tag CSS . Come sapete, la sintassi dei tag consente di impostare l'allineamento dell'immagine negli attributi:

dove VALUE può assumere valori

• allineamento sinistro - sinistro
• destra - allineamento destro
• bottom - allineamento alla prima riga di testo (questo valore è l'impostazione predefinita)
• top - allineamento alla riga superiore del testo
• mezzo - allineamento alla linea di base del testo

Per esempio

testo testo testo testo testo testo testo testo testo testo testo testo testo testo

L'immagine sembra aderire al testo, quindi facciamo dei rientri. E ci sono due opzioni su come farlo.

Opzione 1.1. Tramite proprietà CSS - hspace e vspace
Per fare ciò, negli attributi del tag aggiungi due valori:

Ecco come apparirà sulla pagina:

L'attributo hspace imposta il rientro orizzontale in pixel, vspace - rispettivamente verticale

Opzione 1.2. Tramite proprietà CSS - riempimento e margine
Per fare ciò, negli attributi del tag aggiungi due valori:

Ecco come apparirà sulla pagina:

Sembra migliore perché non abbiamo rientrato da sinistra. Invece di margin, puoi usare padding , l'effetto sarà simile.

Usando la proprietà float invece di align

Oltre alla proprietà align negli attributi del tag gli stili hanno una proprietà CSS float, che è anche responsabile dell'allineamento. La sintassi è la seguente:

galleggiante :destra; // Allineamento corretto galleggiante :sinistra; // Allineamento a sinistra

Ad esempio, se scrivi nell'esempio precedente l'output dell'immagine come segue:

Ciò si traduce in quanto segue.

CSS float ti consente di creare menu HTML, posizionare blocchi, allineare immagini

Se non capisci come funziona avvolgere in HTML e CSS(proprietà float), quindi questa nota ti aiuterà a navigare. La proprietà CSS float viene spesso utilizzata per posizionare due o più riquadri in una riga. La parte superiore di questi blocchi è allo stesso livello, la parte inferiore, a seconda dell'altezza dei blocchi. I blocchi stessi "fluttuano" a sinistra ( galleggiante: sinistra) o destra ( galleggiante: a destra). C'è anche un valore di none, disabilita il wrapping (operazione mobile) per un elemento specifico con float: none

La proprietà viene utilizzata anche durante l'allineamento delle immagini.

Testo che avvolge un'immagine

Caratteristiche del wrapping nei CSS

Un effetto "laterale" si verifica se l'immagine allineata su entrambi i lati è grande e si trova nella parte inferiore del riquadro in cui è allineata. In questo caso possono interagire anche elementi di blocco successivi.

Un'altra caratteristica è la perdita di altezza dell'elemento genitore. Quando l'altezza del blocco genitore è determinata dal contenuto e all'interno sono presenti elementi mobili, il genitore "dimentica" l'altezza di quelli interni (sono volati via!). Il risultato è il bordo compresso dell'elemento HTML padre.

Cancellazione del wrapping in HTML e CSS

Puoi evitare i problemi descritti sopra specificando un elemento block con la proprietà CSS clear dietro gli elementi mobili. Questa proprietà annulla gli effetti di float sugli elementi che seguono il float. Questo potrebbe essere un blocco div, o un altro elemento o pseudo-elemento con un valore di clear:left (altri valori di clear: right o clear: both) se vogliamo annullare l'effetto di un elemento fluttuante a sinistra.

Il wrapping viene annullato con la proprietà CSS clear.

Menù orizzontale

Usando il wrapping, puoi creare un menu orizzontale. Per questo è necessario fare domanda galleggiante: sinistra agli elementi li. In questo caso, gli elementi assumono una posizione orizzontale, resta solo da inserire i collegamenti. Questo non è l'unico modo, un menu simile può anche essere creato tramite diversi collegamenti ipertestuali consecutivi utilizzando la proprietà display: blocco in linea o display: tavolo e altri.

Per ulteriori informazioni sui float CSS, vedere la pagina della documentazione CSS-float. La stessa pagina descrive in dettaglio il modello box CSS.

L'annullamento del wrapping dei blocchi (float) è l'operazione più comune durante il layout delle pagine HTML. Esamineremo tutti i modi noti per annullare la proprietà float CSS.

Prima di approfondire le tecniche di pulizia del flusso, diamo un'occhiata al problema che stiamo cercando di risolvere.

Tipico caso di layout HTML

Blocchi .el-1 e .el-2 affiancati all'interno del contenitore .contenitore e un elemento .principale segue dopo .contenitore:

Vogliamo l'altezza del contenitore .contenitore era uguale all'altezza del più lungo dei suoi figli (cioè o .el-1, o .el-2) e per bloccare .principale essere dopo il blocco .contenitore.

Ed ecco cosa vediamo: .contenitore(scatola nera) è crollato come se non ci fosse nulla dentro, blocco .principale(blocco con sfondo rosso) si trova sotto il blocco .contenitore, come volevamo, ma allo stesso tempo si nasconde dietro i blocchi .el-1(con sfondo giallo) e .el-2(con sfondo rosa). Dio sa cosa! Se il mio capo lo vedesse, di certo mi direbbe... "Usa, Shurik, layout tabulare". Fortunatamente, i tempi in cui le pagine Web erano composte da tabelle sono ormai lontani e possiamo fare benissimo senza di loro. Non credi? Continuare a leggere.

Nonostante il fatto che molti lo considerino un bug del browser, questo è solo il principio in base al quale funzionano gli elementi mobili. Pertanto, è necessario forzare l'espansione dell'elemento padre per contenere completamente gli elementi figlio. Quindi, i seguenti elementi verranno posizionati sotto il contenitore.

Metodo 1: il metodo della vecchia scuola

Come sapete, la proprietà CSS chiaro imposta su quale lato di un elemento non è consentito avvolgere altri elementi, quindi questa proprietà può impedire agli elementi di sovrapporsi agli elementi mobili. L'idea è questa: inserire un elemento vuoto che abbia la proprietà clear sotto le caselle mobili. È una tradizione consolidata usare una classe specifica per un tale elemento, quindi puoi usarla nel tuo HTML. Ecco il classico codice CSS:

Chiaro (chiaro: entrambi; )

Che è applicabile al nostro layout HTML:

La nostra demo implementata utilizzando questo metodo:

Se non ti interessa il contenitore che sta crollando, solo il blocco fuori posto .principale, puoi anche inserire un elemento di "pulizia del flusso" dopo il contenitore. Ma, se scegli di farlo, è molto più semplice aggiungere semplicemente la proprietà clear all'elemento stesso. .principale.

Questo è un metodo semplice e chiaro. Tuttavia, nel layout moderno, viene praticata la separazione del contenuto dallo stile, quindi è meglio non usarlo.

Metodo 2: proprietà di overflow

Usando la proprietà traboccare nell'etichetta .contenitore, possiamo forzare l'espansione del contenitore all'altezza degli elementi posizionati. Il nostro CSS sarà simile a questo:

Contenitore ( overflow: nascosto; /* o "auto" */ )

Il nostro HTML rimarrà lo stesso di prima, senza elementi aggiuntivi. Ecco cosa finiremo con:

Sfortunatamente, questo metodo ha uno svantaggio: qualsiasi elemento figlio che si estende oltre il contenitore verrà ritagliato (in caso di overflow: nascosto;) o farà apparire le barre di scorrimento (nel caso di overflow: auto;).

Metodo 3: classe "clearfix".

Creiamo una classe .clearfix con pseudo elementi ::prima e ::dopo e impostali per visualizzare: table , che crea una cella di tabella anonima. Questa classe verrà utilizzata per cancellare gli elementi mobili. Il codice CSS si presenta così:

Clearfix:before, .clearfix:after ( contenuto: ""; display: tabella; ) .clearfix:after ( clear: entrambi; ) .clearfix ( zoom: 1; /* cioè 6/7 */ )

Cambiamo un po' di codice HTML aggiungendolo alla classe contenitore Classe clearfix:

Ecco l'output della nostra nuova classe:

se non hai bisogno del supporto per browser inferiori a IE8, il nostro codice sarà notevolmente ridotto:

Clearfix:after ( contenuto: ""; display: tabella; clear: entrambi; )

Metodo 4: valore di contenimento a virgola mobile per l'altezza minima

Contenitore (altezza minima: contenitori galleggianti; )

Questo codice dà quasi lo stesso effetto di clearfix o overflow, ma con una riga di codice e, inoltre, non presenta gli svantaggi di cui abbiamo parlato prima. Sfortunatamente, nessuno dei browser supporta ancora questa proprietà, quindi tienilo a mente.

Quindi, hai un sacco di diversi metodi "clearfix". Applicazione di classe .clearfixè diventato lo standard e consiglio vivamente di usarlo al posto dei due metodi precedenti.

L'uso delle immagini in una pagina html è sempre più informativo e visivo, rispetto al testo solido.

È possibile inserire un'immagine nel testo html in diversi modi, e nei classici di questi metodi ce ne sono 3:

• allineamento centrale dell'immagine
• testo che avvolge un'immagine
• posizionare un'immagine in un campo

Allineamento al centro dell'immagine

Per allineare un'immagine al centro di una colonna di testo, il tag più semplice è mettere in un contenitore

Per cui è impostato l'attributo align="center". Se è previsto un uso frequente delle immagini, sarebbe meglio utilizzare lo stile CSS per il tag

Come viene implementato, vedere l'esempio 1.

Esempio 1: allineamento di un'immagine al centro

In questo esempio, al contenitore

Aggiungiamo la classe CSS cimg, che specifica l'allineamento al centro della linea. Come apparirà schematicamente è mostrato nella Figura 1.

Riso. 1. Disegnare al centro di una colonna di testo

Testo che avvolge un'immagine

Avvolgere un'immagine con del testo è uno dei modi più comuni per disporre le pagine HTML, che consente di utilizzare in modo efficiente tutto lo spazio libero. tecniche popolari di layout di pagine Web, quando l'immagine si trova sul bordo della finestra del browser e il testo la ignora su altri lati (Fig. 2). Per personalizzare il wrapping di un'immagine con il testo, puoi utilizzare diversi metodi basati sia su HTML che CSS.

Riso. 2. L'immagine è allineata al lato sinistro della pagina e il testo va a capo a destra

Per avvolgere un'immagine con del testo usando HTML, devi ricordare che il tag ha esiste un attributo align che definisce l'allineamento dell'immagine nel documento e allo stesso tempo specifica come il testo si avvolge attorno all'immagine. Per allineare l'immagine a destra e impostare l'avvolgimento a sinistra, è necessario utilizzare align="right", per allineare a sinistra e avvolgere il testo a destra, utilizzare align="left". È anche utile utilizzare qui gli attributi dei tag - vspace e hspace, che indicano a quale distanza il testo avvolgerà l'immagine verticalmente e orizzontalmente. Senza specificare questi attributi, il testo sarà strettamente adiacente all'immagine (esempio 2).

Esempio 2: testo che avvolge un'immagine utilizzando HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Per regolare il wrapping dell'immagine usando gli stili CSS, useremo la regola float. float:right allinea l'immagine al bordo destro del documento e avvolge il testo a sinistra, mentre float:left allinea l'immagine al bordo sinistro del documento e avvolge il testo a destra dell'immagine (esempio 3).

Esempio 3 Avvolgi del testo attorno a un'immagine usando i CSS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Qui per taggare viene aggiunta la classe cimg, che ha float: right allineamento impostato a destra e il wrapping dell'immagine a sinistra e in basso è impostato dalle proprietà padding-left: 10px e padding-bottom: 10px.

Immagine sul campo

Con questo formato per posizionare un'immagine in un documento, l'immagine si avvolge solo su un lato. Questo metodo di posizionamento assomiglia a una struttura a due colonne, in cui un'immagine viene posizionata in una colonna e il testo nella seconda.

Con questo schema, l'immagine si trova a destra oa sinistra del testo e il suo avvolgimento avviene solo su un lato. In effetti, assomiglia a due colonne, una delle quali contiene un'immagine e l'altra contiene del testo (Figura 3).

Riso. 3. Posizionamento dell'immagine nella casella a sinistra del testo

Conosco due modi per creare una struttura simile: utilizzare i tag HTML

Tabelle: questo metodo è conveniente in quanto è facile e comprensibile organizzare una struttura colonnare usando le celle. Questo metodo è vecchia scuola e il suo utilizzo non è particolarmente gradito nel moderno web design. Si ritiene che questo metodo sia ridondante e difficile da modificare. Ma tutti i principianti lo attraversano. Per una tale struttura, abbiamo bisogno di una tabella con tre colonne, nella prima colonna ci sarà l'immagine stessa, nella terza il testo e tra di loro indicheremo il rientro - nella seconda colonna. Puoi cavartela con due colonne e specificare il rientro tramite gli stili CSS o utilizzando l'attributo width del tag (esempio 4).

Esempio 4: Posizionamento di un'immagine su un campo utilizzando le tabelle

I ricci sono protetti dalle aggressioni esterne da un guscio spinoso, che li salva da chi vuole trarre profitto dalla gustosa e tenera carne di riccio. Ma non dovresti considerare questo animale completamente innocuo, dopotutto è un predatore. Sì, non si nutre di lupi e volpi, ma solo perché è di taglia inferiore a loro. Ma avere un morso con un verme o anche con un serpente è abbastanza in suo potere.

Il risultato è mostrato in Figura 4.

Riso. 4. Immagine nel campo a sinistra del testo

Nell'esempio 4, la larghezza dell'immagine è 90 pixel e la larghezza della colonna in cui si trova è 110 pixel. La differenza tra loro ci fornisce il rientro necessario dal testo all'immagine. Per evitare che gli attributi della tabella cellspading e cellpadding interferiscano con il processo, è meglio azzerare i loro valori. Si noti che le celle sono impostate su vertical-align: top.

Stili CSS: questo esempio è più preferito e ottimale. Qui abbiamo bisogno di due strati

, i cui parametri specifichiamo tramite CSS. L'immagine sarà su un livello e il testo sull'altro. Come funziona, vedi esempio 5:

Esempio 5: Posizionamento di un'immagine su un campo con livelli e stili CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<codice > <html > <testa > <meta http-equiv = "Tipo di contenuto" content = "testo/html; charset=utf-8" > <titolo > Disegnare sul campo</titolo> <styletype="testo/css"> </stile> </testa> <corpo > <div id="pic"> <img src="images/igels.png" width="90" height="78" alt= "Non ci crederai, ma è un riccio"> </div> <div id="testo"> I ricci sono protetti dalle aggressioni esterne da un guscio spinoso, che li salva da chi vuole trarre profitto dalla gustosa e tenera carne di riccio. Ma non dovresti considerare questo animale completamente innocuo, dopotutto è un predatore. Sì, non si nutre di lupi e volpi, ma solo perché è di taglia inferiore a loro. Ma avere un morso con un verme o anche con un serpente è abbastanza in suo potere.</div> </corpo> </html>

I ricci sono protetti dalle aggressioni esterne da un guscio spinoso, che li salva da chi vuole trarre profitto dalla gustosa e tenera carne di riccio. Ma non dovresti considerare questo animale completamente innocuo, dopotutto è un predatore. Sì, non si nutre di lupi e volpi, ma solo perché è di taglia inferiore a loro. Ma avere un morso con un verme o anche con un serpente è abbastanza in suo potere.

La proprietà float:left per il livello #pic è necessaria per impostare l'immagine in modo che sia adiacente al bordo sinistro del documento e che la riga superiore del testo corrisponda alla riga superiore dell'immagine. Senza questa proprietà, il livello #text scende dell'altezza dell'immagine. Inoltre, per il livello #testo, imposta il rientro sinistro margin-left:110px a una distanza di 110 pixel in modo che il testo non si sovrapponga all'immagine lì. Se l'immagine deve essere posizionata nel margine destro, specifica float:right per #pic e margin-right:110px per #text.

P.S. Secondo la specifica HTML4, le immagini devono essere inserite all'interno di elementi a livello di blocco come div o p.

Usando la proprietà float, puoi allineare un'immagine a sinistra (img (float: left; margin: 0 [x] [y] 0;)) oa destra (img (float: right; margin: 0 0 [x] [ y]); )) al bordo di una pagina Web o di un blocco contenitore.

Per evitare che l'immagine si unisca al testo, vengono aggiunti i valori appropriati della proprietà margin.

Puoi scartare il blocco di testo o intestazione successivo con h2, p (cancella: sinistra;) o h2, p (cancella: destra;) .

Puoi anche posizionare l'immagine al centro della pagina img (display: block; margin: 0 auto;) o avvolgere l'immagine con il testo su entrambi i lati, avvolgendo ogni blocco di testo in un paragrafo separato.

Marcatura HTML

Elenco delle città in Inghilterra

Amersham

Amersham è ....jpg">Buxton è ...

Chesterfield

Chesterfield è ....jpg">

Ha ....jpg">Dartmouth è ...

Stili CSS

Body ( margin: 0; background: #FFF8E8; padding: 0 20px; font-size: 90%; counter-reset: h2; /*crea un contatore per qualsiasi intestazione h2*/ ) h1 ( font-family: "Lora" , serif; color: #564C4A; font-weight: 300; ) h2 ( font-family: "Lora", serif; color: #B00D22; font-weight: 300; clear: both; /* rilassati su entrambi i lati */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-incremento: h2; /* aumenta la numerazione delle intestazioni h2 di uno */ ) h2:before ( content: " " counter(h2) ". "; /* aggiungi il valore del contatore corrente e un punto con uno spazio all'inizio di ogni intestazione */ ) p ( font-family: arial; color: #785F5B; line-height: 1.3; ) /********* * immagine a sinistra ** **********/ .left ( float: sinistra; margine: 0 1em 1em 0; ) /********** immagine a destra **** ******/ .right ( float: right; margin: 0 0 1em 1em; ) /********** immagine tra testo **********/ .columns ( float: sinistra; larghezza massima: 30 %; margine: 0; ) .img-center ( float: sinistra; margine: 0 1,5% 0 1,5%; m larghezza dell'ascia: 37%; ) /********** immagine centrata********* */ .center ( display: blocco; margine: 0 auto 1,5%; )

Avvolgi l'immagine su entrambi i lati

La tecnica consiste nel posizionare il testo in due blocchi della stessa larghezza con un piccolo spazio vuoto nel mezzo. Con l'aiuto degli pseudo-elementi:before e:before, viene aggiunto uno stub a ciascun blocco con una larghezza di metà dell'immagine e un'altezza pari all'altezza dell'immagine. L'immagine è assolutamente posizionata in modo tale da coprire questi blocchi vuoti, ottenendo un effetto avvolgente su entrambi i lati.

Marcatura HTML

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Utfelis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus