CSS avvolgere il testo attorno all'immagine
Esempio 1:
Inizieremo a scrivere il codice giusto ed eseguirlo nel codice Visual Studio. Per iniziare, creiamo un nuovo file e scegliamo HTML come lingua. Ora metti "!"E premi il tasto" Invio ". Tutti i tag necessari HTML possono essere visualizzati qui. Non dovremo scrivere tutti questi tag. Successivamente, utilizziamo semplicemente il tag "link" nel "testa" per inserire il nome del file CSS che vogliamo collegare con questo file HTML. In questo codice, prima mettiamo l'intestazione e poi un div con il nome "Square". All'interno di questo div "quadrato", abbiamo un altro div in cui stiamo inserendo l'immagine utilizzando il tag "IMG".
Dopo aver messo l'immagine nel secondo div chiudere questo div e generare un paragrafo sotto questo div. Quando completiamo questo paragrafo e lo chiudiamo. Quindi, chiudiamo il primo tag "div". Avveremo questo testo attorno a questa immagine che abbiamo inserito. Per il testo di avvolgimento, andremo al file CSS, dove useremo la proprietà "float" per avvolgere il testo.
Innanzitutto, dobbiamo impostare il "margine" del corpo su "20px" e anche allineare tutto il corpo al "centro". La voce "H1" è anche decorata usando "viola" come "colore" di questa intestazione. Usiamo la "famiglia del carattere" e lo regoliamo su "algerino". Quindi, stiamo utilizzando la proprietà "float" per l'immagine che abbiamo inserito nel codice HTML. E imposta questo valore di proprietà "float" su "a sinistra", come per l'immagine che si sposta sul lato sinistro. Regoviamo anche il "margine" dell'immagine su "4px". La "larghezza" e "altezza" di questa immagine sono "250px". Abbiamo anche un paragrafo, quindi impostiamo anche questo paragrafo. Allineiamo il testo del paragrafo e lo impostiamo per "giustificare". Abbiamo impostato la "dimensione del carattere" di questo paragrafo e lo regoliamo su "20px". La "famiglia del carattere" per questo paragrafo è "Calibri".
Di seguito è riportato lo screenshot del codice sopra e vedrai che l'immagine fluttua sul lato sinistro e il testo è avvolto a questa immagine sul lato destro. Avvolgiamo il testo del paragrafo attorno a questa immagine usando la proprietà "float" in CSS.
Esempio n. 2:
Stiamo usando il codice HTML dell'esempio sopra per questo esempio, ma questa volta imposteremo l'immagine sul lato destro utilizzando la proprietà "float". In questo codice CSS, impostiamo il margine del corpo su "20px" e la proprietà "allineate al testo" è regolata al "centro". Il "colore" è "verde" per l'intestazione e la "famiglie di carattere" è "algerina". Inoltre, usa "delerazione del testo" e posiziona "sottolineare" come valore di questa proprietà. Stiamo fluttuando l'immagine alla "destra" in modo che il testo del paragrafo appaia sul lato sinistro di questa immagine. Il "margine" di "IMG" è "5px".
Abbiamo anche impostato la "larghezza" su "190px" e anche "altezza" è "90px". Al di sotto di questo, utilizziamo la proprietà "allineate al testo" per la "P" e questa "P" sta descrivendo il paragrafo. Abbiamo impostato la proprietà "allineate al testo" sulla parola chiave "giustifica" e la "dimensione del carattere" per questo è impostata su "18px". Il "Times New Roman" è utilizzato come "Font-Family".
Nello screenshot puoi vedere che l'immagine appare sul lato destro a causa della proprietà "float" e il testo è avvolto attorno a questa immagine.
Esempio # 3:
Useremo due immagini diverse qui. Mettiamo la prima immagine all'interno del div e poi posizioniamo un paragrafo. Dopo questo paragrafo, inseriamo di nuovo un'immagine all'interno di un altro div e aggiungiamo di nuovo un paragrafo sotto questa immagine. Regoleremo il testo attorno a entrambe le immagini nel codice CSS. Guarda come avvolgeremo il testo attorno a entrambe le immagini in CSS qui sotto.
Il "margine" e la proprietà "allineate al testo" per il corpo sono uguali a quelli che abbiamo usato negli esempi sopra. Il "colore" è cambiato in "rosso" questa volta per l'intestazione. La "famiglie di carattere" è selezionata come "algerina" e anche "sottolinea" questa voce. Stiamo impostando la proprietà "float" per la prima immagine menzionando il nome della prima classe di immagine e impostando la proprietà "float" a "destra". Il "margine" che stiamo usando per la prima immagine è "5px". Utilizziamo anche la proprietà "larghezza" e "altezza" e impostiamo entrambi su "200px".
Quindi, regoliamo anche la seconda immagine e "float" questa seconda immagine a "sinistra" e il suo "margine" è lo stesso che abbiamo impostato per la prima immagine. Ora, "giustifichiamo" questo paragrafo e impostiamo la sua "dimensione del carattere" su "17px". "Arial" è utilizzato come "Font-Family" per "P".
Due immagini sono rese nell'output. La prima immagine è resa sul lato "sinistro" e la seconda immagine viene resa sul lato "destro" della schermata di uscita e tutto il testo è avvolto su entrambe le immagini.
Esempio # 4:
Nel nostro ultimo esempio, abbiamo messo un paragrafo e poi un div. All'interno di questo contenitore Div inseriamo anche un'immagine e un paragrafo. Ora, guarda come utilizziamo tutti questi paragrafi e regolano l'immagine e avvolgiamo anche il testo attorno all'immagine.
Stiamo usando valori "20px" "margine" e "centrale" per "allineamento del testo" per il corpo. Quindi, abbiamo impostato il colore su "marrone" per l'intestazione e il carattere, il carattere "algerino" familiare. "Sottolineiamo" anche l'intestazione. Definiamo la proprietà "float" per l'immagine specificando il nome della classe di immagine e impostando la proprietà "float" su "a sinistra". Per questa immagine, il "margine" che stiamo usando è "5px". La "larghezza" di questa immagine è "300px" e la sua "altezza" è "300px".
Ora stiamo applicando alcune proprietà al paragrafo per renderlo più attraente. Abbiamo impostato il "colore" del testo del paragrafo su "nero". Abbiamo anche impostato la proprietà di allineamento del testo per "giustificare" e impostare "18px" per la "dimensione del carattere". Regoviamo anche il "Famiglia del carattere" "Times New Roman" per il paragrafo.
Puoi notare che esiste un paragrafo sopra l'immagine, un paragrafo sotto l'immagine, un testo di paragrafo sul lato destro dell'immagine e l'immagine fluttua sul lato sinistro. Il testo del paragrafo avvolge questa immagine perché lo impostiamo nel codice CSS.
Conclusione
Il focus di questo articolo è di spiegarti come avvolgere il testo attorno all'immagine in CSS. Abbiamo studiato questo concetto approfondito in questo articolo e spiegato cosa sta avvolgendo il testo e cosa dovremmo fare per avvolgere il testo attorno all'immagine. Abbiamo usato la proprietà "float" per fluttuare l'immagine a "a sinistra" o "a destra" e avvolgendo il testo attorno a questa immagine. Abbiamo anche incluso più esempi qui in cui abbiamo avvolto il testo attorno all'immagine, inclusi i risultati di tutti gli esempi dell'articolo. Spero che avrai una buona comprensione del testo avvolgente attorno al concetto di immagine in CSS dopo aver letto questo articolo e applicato questi esempi in pratica da solo.