Molto spesso, al progettista del layout vengono affidati alcuni compiti non standard. Il nostro obiettivo è offrire la soluzione più razionale e corretta. Oggi parleremo delle caratteristiche del testo che avvolge un'immagine.
Formulazione del problema
Scrivere un articolo per la tua risorsa informativa o il tuo blog sarà spesso accompagnato dall'inclusione di immagini lungo il percorso. Poiché il robot di ricerca ha sempre rispettato la presenza di immagini sul sito, l'utente sarà più soddisfatto del testo con immagini luminose. Da qui la necessità di installare uno speciale metodo di formattazione che garantisca una bella interazione tra testo e immagini.
Consideriamo il caso in cui non è richiesto il ritorno a capo del testo. Inoltre, offro un'opzione universale: in assenza di un'immagine, il testo viene allungato su tutta la larghezza del blocco (non tutti i tuoi articoli saranno accompagnati da illustrazioni). La larghezza del blocco di testo non è strettamente fissa. Di seguito è riportato come dovrebbe apparire il nostro blocco.
Soluzione corretta
Per implementare l'attività, creiamo due blocchi: uno per l'immagine, il secondo per il testo. Tenendo conto del fatto che potrebbero esserci altri elementi sotto l'immagine, creiamo un contenitore separato per l'immagine, altrimenti questo non è richiesto, puoi semplicemente assegnare la classe richiesta al tag dell'immagine.
HTML
< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Blocco di testo
Visualizzazione: in linea; )
Questa è una soluzione standard per il testo che avvolgerà un blocco con un'immagine. Apparirà così:
Sarebbe abbastanza logico suggerire di assegnare al testo le proprietà di un oggetto mobile. Se le larghezze degli oggetti non sono impostate, otteniamo la seguente immagine:
Per evitare questo effetto, è sufficiente specificare la larghezza del blocco di testo, ma ciò non soddisfa le condizioni del nostro compito.
La prossima buona opzione sarebbe quella di utilizzare la proprietà margin-left. Poiché per un blog, molto probabilmente, tutte le immagini in questo blocco saranno di dimensioni unificate, la soluzione, in linea di principio, non è male ed efficace. Tuttavia, questo è solo un caso speciale, poiché se nell'articolo non è presente alcuna immagine, sulla sinistra ci sarà semplicemente una striscia vuota. Questo non ci va bene. Cerchiamo una soluzione universale!
E la soluzione più corretta, come spesso accade, è la più semplice. Per ottenere la formattazione desiderata di un blocco di testo, è necessario accedere alla proprietà overflow con il valore nascosto. Non dimenticare l'esclusivo Internet Explorer. Come al solito, si mette in mostra e richiede un'attenzione particolare! Affinché il nostro vecchio funzioni normalmente, aggiungiamo la proprietà float al blocco di testo (dopo aver effettuato l'accesso alla proprietà overflow, non sarà richiesta la definizione di una larghezza fissa).
Pertanto, siamo giunti alla soluzione corretta, che porterà all'effetto indicato nell'immagine nella sottosezione che descrive le condizioni del nostro compito.
Immagine ( float: sinistra; /*wrap */ margine: 10px; /*imbottitura esterna per bellezza */ visualizzazione: in linea; /* per IE6, in modo che il margine sinistro non raddoppi */). testo( overflow: nascosto; float: sinistra; )
Svantaggi del metodo e alternativa
Nonostante la semplicità e la versatilità del metodo, che consiste nell'utilizzare overflow: nascosto, c'è uno svantaggio. La proprietà non svolgerà più le sue funzioni se nella parte di testo vengono utilizzati elementi a discesa.
In questo caso, avrai bisogno di un'alternativa per configurare la formattazione desiderata. Questa tecnica si baserà sulla funzionalità della combinazione display:cella-tabella;. Questa soluzione è altrettanto efficace, ma leggermente inferiore nella semplicità del primo metodo. Quando si chiama questo metodo, è inoltre necessario impostare il layout affinché funzioni nell'ambiente Internet Explorer
Img (float: sinistra; /* imposta il confezionamento */ margine: 10px; /* rientro per bellezza */ visualizzazione: in linea; /* per IE6, in modo che il margine sinistro non raddoppi */). testo(visualizzazione: tabella-cella; zoom: 1; /* Accuratamente! La stringa non è valida */ }
E questa soluzione ha le sue caratteristiche che devono essere prese in considerazione durante la progettazione. Se la parte di testo è sufficientemente breve, il blocco successivo verrà visualizzato a destra del blocco con la classe testo. Per evitare ciò, è necessario racchiudere il blocco di testo e l'immagine in un contenitore separato.
Con quali browser funziona?
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
Tutti gli elementi HTML su una pagina web sono disposti in un flusso comune, dall'alto verso il basso (per gli elementi blocco) e da sinistra a destra (per gli elementi in linea). Questo metodo di visualizzazione non è molto efficace, ma grazie ai CSS è possibile modificare in meglio il design.
Elementi galleggianti
Quando definisci un elemento flottato, devi posizionarlo nel codice direttamente sotto l'elemento sotto il quale desideri che flotta; tutti gli altri contenuti inseriti nel codice sotto l'elemento flottato scorreranno attorno ad esso nella pagina web. Diamo uno sguardo più da vicino al modo in cui i browser caricano elementi mobili e altri contenuti su una pagina web.
Innanzitutto, il browser carica gli elementi sulla pagina nell'ordine normale, spostandosi dall'alto verso il basso, quando incontra un elemento mobile lo posiziona sul lato specificato. Il browser esclude questo elemento dal flusso generale e di conseguenza "galleggia" sulla pagina.
Poiché l'elemento mobile è stato escluso dal flusso generale, i restanti elementi del blocco situati nel codice dopo di esso vengono caricati sulla pagina come se questo elemento non fosse presente. Tieni presente che gli elementi del blocco sono posizionati sotto l'elemento mobile, questo perché l'elemento mobile non fa più parte del flusso complessivo.
Se osservi attentamente la figura, vedrai che a differenza degli elementi blocco, quando si posizionano elementi in linea o testo semplice all'interno di un elemento blocco, vengono presi in considerazione i limiti dell'elemento mobile, quindi gli elementi in linea e il testo scorrono attorno ad esso.
Tieni presente che puoi posizionare più elementi mobili in una riga se la larghezza dell'elemento genitore lo consente.
Nota: gli elementi con posizione assoluta e fissa ignorano la proprietà float.
Utilizzando la proprietà float CSS, l'immagine è stata fatta fluttuare sul lato sinistro. Il testo situato nel codice HTML sotto l'immagine si avvolgerà attorno all'immagine lungo i lati destro e inferiore.
Per creare spazio vuoto tra un'immagine e il testo che la avvolge, è necessario aggiungere spaziatura interna all'immagine. Poiché l'immagine è spostata rispetto al bordo sinistro dell'elemento genitore, sarà sufficiente aggiungere il riempimento solo a destra e in basso per allontanare leggermente il testo da esso:
Img ( float: left; margine: 0 10px 10px 0; ) Prova »
Annulla avvolgimento
A volte vuoi visualizzare un elemento in modo che non sia influenzato dagli elementi mobili che lo precedono. Un elemento del genere, ad esempio, potrebbe essere il footer, che in ogni caso dovrà essere visualizzato sotto tutti gli altri elementi della pagina. Se sulla tua pagina è presente una barra laterale alta, situata sul bordo sinistro della pagina web, il piè di pagina potrebbe sollevarsi e apparire alla sua destra. Quindi, invece di essere posizionato sulla pagina, il contenuto del piè di pagina apparirà a filo con la barra laterale. Questo problema viene risolto utilizzando la proprietà clear, che dice al browser che l'elemento a cui si applica lo stile non deve avvolgere quello mobile.
La proprietà CSS clear può essere impostata su uno dei seguenti valori:
- left: gli elementi mobili non sono consentiti sul lato sinistro.
- right - gli elementi mobili non sono consentiti sul lato destro.
- entrambi - gli elementi fluttuanti sono vietati su entrambi i lati.
- nessuno: consente elementi mobili su entrambi i lati.
La proprietà clear specifica che gli elementi mobili non sono consentiti sul lato destro. Il testo situato sotto l'immagine non verrà disposto attorno al bordo sinistro dell'immagine.
In questo articolo esamineremo le opzioni per disporre il testo attorno a un'immagine. Esistono diversi modi. Diamo un'occhiata a ciascuno di essi. Per iniziare ti consiglio di leggere il tag html dell'articolo avere una conoscenza di base delle immagini sulle pagine html.
1. Avvolgimento con stili di tag ![]()
L'immagine può essere allineata solo operando con gli stili dei tag CSS . Come sai, la sintassi del tag ti consente di impostare l'allineamento dell'immagine negli attributi:
dove VALORE può assumere valori
- sinistra - allineamento sinistra
- destra - allineamento giusto
- bottom - allineamento alla prima riga di testo (questa è l'impostazione predefinita)
- top - allineamento alla riga superiore del testo
- medio: allineamento alla riga di base del testo
Per esempio
Testo testo testo testo testo testo
testo testo testo testo testo testo
L'immagine sembra essere rimasta unita al testo, quindi creeremo dei rientri. Inoltre, 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 specifica rispettivamente il riempimento orizzontale in pixel, vspace – il riempimento verticale.
Opzione 1.2. Attraverso la 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 a sinistra. Invece del margine, puoi usare il riempimento, l'effetto sarà simile.
Usare float invece di allineare
Oltre alla proprietà align negli attributi del tag gli stili hanno una proprietà float CSS, che è anche responsabile dell'allineamento. La sintassi è la seguente:
galleggiante: giusto; // Giusto allineamento galleggiante:sinistra; // Allineamento a sinistra
Ad esempio, se scrivi l'output dell'immagine nell'esempio precedente come segue:
Quindi si trasforma nel seguente.
Compito
Aggiungi un'immagine alla pagina in modo che sia avvolta attorno al testo adiacente.
Soluzione
L'avvolgimento del testo attorno a un'immagine viene solitamente utilizzato per disporre in modo compatto il materiale e collegare insieme illustrazioni e testo. Il float stesso viene creato utilizzando la proprietà dello stile float aggiunta al selettore IMG. Il valore sinistro allinea l'immagine a sinistra, destra - a destra. In questo caso il flusso avviene lungo gli altri lati liberi.
Esempio 1. Avvolgere le immagini
HTML5 CSS 2.1 IE Cr Op Sa Fx
Rapporto del tenente Bokatuev
Ieri, durante un'operazione di ricognizione, il nostro gruppo è stato attaccato da un nemico sconosciuto in uniforme mimetica Alien. Come risultato di una difesa efficace e di un rapido contrattacco, un folto gruppo di militanti fu schiacciato e respinto. Non ci sono vittime tra il personale. I combattenti del gruppo di ricognizione hanno mostrato notevoli abilità nell'uso delle armi. Particolarmente distinto in battaglia fu il leader del plotone M.A. Kudryashev, che utilizzò saggiamente le risorse umane del suo plotone. Come risultato dell'operazione, elementi della cultura extraterrestre furono catturati e trasferiti al gruppo analitico.
Comunicato stampa del gruppo analitico
Le armi psicotrope sono state sviluppate nei nostri laboratori segreti come parte del Progetto Pandora. Come risultato di un esperimento fallito, la maggior parte degli scienziati che hanno lavorato al dispositivo sono stati esposti a radiazioni psicotrope e, in uno stato di passione, hanno smontato il prototipo. Forse i nostri scienziati sono ancora in uno stato di passione.
Il risultato di questo esempio è mostrato in Fig. 1.
Riso. 1. Testo con illustrazioni
L'uso della proprietà float forza il testo ad adattarsi perfettamente all'immagine. Pertanto, l'esempio introduce una proprietà universale margin , che aggiunge spaziatura tra l'immagine e il testo. Questa proprietà imposta contemporaneamente il rientro nella parte superiore, destra, inferiore e sinistra delle foto.
Ultimo aggiornamento: 21/04/2016
In genere, tutti i blocchi e gli elementi di una pagina Web vengono visualizzati nel browser nell'ordine in cui sono definiti nel codice html. Tuttavia, i CSS forniscono una speciale proprietà float che ci consente di impostare gli elementi su float, in modo da poter creare pagine web più interessanti e varie nel loro design.
Questa proprietà può assumere uno dei seguenti valori:
sinistra: l'elemento si sposta a sinistra e tutto il contenuto che va sotto si avvolge attorno al bordo destro dell'elemento
destra: l'elemento si sposta a destra
none: annulla l'avvolgimento e riporta l'oggetto nella sua posizione normale
Quando si utilizza la proprietà float su elementi diversi dall'elemento img a cui applicare lo stile, si consiglia di impostare la proprietà width.
Immaginiamo quindi di dover visualizzare un'immagine sulla pagina a sinistra del testo principale, una barra laterale a destra e il resto dello spazio dovrebbe essere occupato dal testo principale dell'articolo. Definiamo innanzitutto l'interfaccia della pagina senza la proprietà float:
La vecchia quercia, completamente trasformata, si estendeva come una tenda di vegetazione rigogliosa e scura, ondeggiava leggermente, ondeggiava leggermente ai raggi del sole della sera...
"No, la vita non finisce all'età di 31 anni", decise improvvisamente, finalmente e irrevocabilmente, il principe Andrei...
In questo caso, otterremo un posizionamento sequenziale degli elementi nella pagina:
Ora nella stessa pagina applicheremo la proprietà float, modificando gli stili come segue:
Immagine ( float:sinistra; /* float sinistra */ margine:10px; margine-top:0px; ) .sidebar( bordo: 2px solido #ccc; colore sfondo: #eee; larghezza: 150px; riempimento: 10px; margine- sinistra: 10px; dimensione carattere: 20px; float: destra; /* sposta a destra */ )
Il posizionamento degli elementi sulla pagina cambierà di conseguenza:
Gli elementi a cui viene applicata la proprietà float sono anche chiamati elementi flottanti.
Nessun flusso in giro. proprietà chiara
A volte diventa necessario vietare i flussi. Un'attività simile può essere rilevante se alcuni blocchi devono essere spostati su una nuova riga e non avvolgersi attorno a un elemento mobile. Ad esempio, il piè di pagina, di regola, dovrebbe essere posizionato rigorosamente in basso e estendersi su tutta la larghezza della pagina. Se c'è un elemento mobile davanti al piè di pagina, il piè di pagina potrebbe scorrere attorno a questo elemento, il che non è auspicabile.
Per impedire il ritorno a capo degli elementi, i CSS utilizzano la proprietà clear, che dice al browser che all'elemento a cui si sta applicando lo stile non dovrebbe essere applicato il ritorno a capo.
La proprietà clear può assumere i seguenti valori:
sinistra: l'elemento con stile può avvolgere l'elemento flottato a destra. A sinistra il flusso non funziona
destra: l'elemento con stile può fluttuare solo a sinistra dell'elemento fluttuato. E a destra il flusso non funziona
entrambi: l'elemento con stile può avvolgersi attorno agli elementi fluttuanti e spostarsi verso il basso rispetto ad essi
none: l'elemento stilizzato si comporta in modo standard, cioè partecipa al flusso destro e sinistro
Ad esempio, supponiamo che su una pagina Web sia definito un piè di pagina:
La presenza di un ritorno a capo creerà una visualizzazione errata in cui il piè di pagina si sposta verso l'alto:
Cambiamo lo stile del piè di pagina:
Piè di pagina (bordo superiore: 1px solido #ccc; chiaro: entrambi;)
Ora il piè di pagina non scorrerà attorno all'immagine, ma scenderà.
