CSS tira a destra
Esempio 01:
Nel nostro primo esempio, useremo la proprietà Float per attirare i diversi elementi a destra, a sinistra e da nessuna parte. Inoltre, confronteremo queste proprietà tra loro per una migliore comprensione. Iniziamo il nostro primo esempio con il formato di documento HTML standard utilizzato per la creazione di eventuali pagine Web basate su HTML. Il tag principale contiene il titolo della pagina HTML da creare con l'aiuto di un tag "Titolo" interno. Dopo questo, abbiamo un tag di stile e l'etichetta del corpo principale. Prima di guardare lo stile CSS di una pagina HTML, dobbiamo dare un'occhiata al corpo che verrà disegnato. Il corpo di questa pagina HTML contiene l'intestazione semplice 1 e il tag "div" principale per creare una sezione all'interno della pagina HTML. Questo tag "Div" è specificato con la classe "A" per la differenziazione durante lo styling. All'interno di questa sezione, abbiamo altri 3 elementi "div" che vengono utilizzati qui.
Tutte e tre le sezioni Div sono specificate con tre diverse classi: float-left, galleggiante-destra e float non. Dopo aver chiuso queste tre sezioni "div", chiudiamo anche la sezione principale "div". La chiusura della sezione Div principale è seguita dal tag "corpo" di questo HTML. Il corpo e la sua parte degli elementi sono ora completi. Per far trarre alcune sezioni a destra o a sinistra, dobbiamo modellarle di conseguenza. Pertanto, all'interno del tag di stile del codice HTML, utilizziamo la classe "A" per la prima sezione "div" per posizionarla rispetto alla pagina HTML tramite la proprietà "posizione".
Inoltre, questa sezione principale è di 400 pixel di larghezza e altezza con un bordo solido di 3 pixel di colore marrone. Dopo questo, utilizziamo le classi float-left, float-wight e float senza le sezioni interne "div" per modellarle di conseguenza. La proprietà float viene utilizzata per la prima sezione Div interiore per attirarla sul diritto esatto della pagina HTML. Inoltre, questa sezione contiene larghezza di 100 pixel, altezza di 120 pixel e un bordo tratteggiato di 3px in colore blu massiccio. Il secondo "div" interno è posizionato su un parente e tirato verso sinistra della pagina HTML usando la proprietà float. Ha una larghezza di 200px, altezza 120px, con il bordo verde solido 3px. L'ultima sezione interna contiene una posizione assoluta senza proprietà di pull. Inoltre, ha un bordo marrone solido 3px, larghezza 100px e altezza 100px. Questo codice è pronto per essere utilizzato sul browser Chrome tramite il codice Visual Studio per vedere lo stile.
Dopo averlo eseguito all'interno del browser Chrome, otteniamo il seguente output. La sezione Div principale viene visualizzata con un bordo rosso solido e la sua posizione è relativa alla pagina HTML. Mentre la sezione Div di colore blu del bordo tratteggiato viene tirata a destra con l'uso della proprietà "float" nel CSS di questo codice come mostrato nell'immagine. La sezione Div di colore verde viene tirata a sinistra usando la proprietà "float" ed è relativa alla pagina HTML. La posizione della sezione "div" marrone è specificata come relativa e viene visualizzata nell'immagine.
Esempio 02:
Iniziamo con un altro esempio di utilizzo della proprietà float di CSS per tirare gli elementi dell'HTML a destra o a sinistra. Questo codice inizia con lo stesso tag HTML seguendo il tag "testa" che contiene il titolo per questa pagina HTML, i.e. "CSS tira a destra". Per l'aggiunta di un titolo per questa pagina, utilizziamo il tag del titolo. Dobbiamo prima dare una buona occhiata alla sezione del corpo della nostra sceneggiatura HTML. Aggiungiamo un'intestazione al corpo della pagina HTML usando il tag di intestazione "H1", i.e. Intestazione di grandi dimensioni.
Dopo questo, proviamo un tag "sezione" all'interno di questo codice HTML. Questo tag sezione viene utilizzato per creare una sezione all'interno del corpo della pagina HTML. All'interno di questa sezione, utilizziamo tre nuovi elementi "div" e un elemento di paragrafo. Entrambi i primi tag DIV utilizzano la stessa classe "sinistra" mentre il terzo tag DIV utilizza un'altra classe "Pull destra" nel suo tag di apertura. I primi due tag DIV contengono semplici testi al loro interno mentre il terzo tag DIV contiene un tag "IMG" dell'immagine per aggiungere l'immagine in questa sezione Div. La fonte di questa immagine è il nostro sistema locale ed è in formato "jpg". Il paragrafo contiene anche una semplice linea di testo in esso.
Dopo la fine di tutti e 3 i tag DIV e il tag paragrafo, il nostro tag di sezione si è concluso qui con la sua chiusura. Il corpo di questa pagina HTML è ora completato. Chiudi il tag "corpo". All'interno del tag "stile" di questo codice HTML per lo styling, specifichiamo l'elemento "sezione" per modellare i suoi elementi interni combinati alla volta. Questa dimensione della sezione è definita dal formato "bordo-box" e contiene il bordo trattato a 5 pixel attorno ad esso. La larghezza di questa sezione è del 50 percento mentre viene tirata a sinistra tramite la proprietà "float". Gli elementi "Div" sono disegnati con margine 5px, larghezza 200px e altezza 150px per tutti. Gli elementi Div contenenti la classe "sinistra" vengono visualizzati nella posizione di sinistra con lo sfondo rosa del tè.
Mentre gli elementi Div con la classe "a destra" vengono tirati a destra con l'uso della proprietà "float" e lo sfondo è impostato sul colore vicino al cielo-blu. Il nostro codice è completato ed è pronto per l'uso nel codice Visual Studio tramite il menu "Esegui" seguendo l'opzione "Avvia debug".
L'output per questo codice mostra la semplice intestazione e una nuova sezione punteggiata generata all'interno della pagina HTML. Questa sezione contiene tre diverse sezioni di div al suo interno. Le prime due sezioni di div vengono tirate a sinistra con il colore di sfondo rosa del tè. Mentre la terza sezione Div contiene un'immagine tirata verso destra di questa pagina HTML.
Conclusione
Abbiamo discusso della necessità e dell'uso di tirare gli elementi nella pagina HTML nel nostro paragrafo introduttivo. Questo articolo mostra una dimostrazione molto chiara di tirare gli elementi CSS a sinistra, a destra o nessuno tramite la proprietà "galleggiante" CSS. È usato in tutti gli esempi per attirare quegli elementi in una direzione specifica con l'uso di classi nelle sezioni di diviezze. Tutti gli esempi trattati in questo articolo sono abbastanza semplici e facili da capire per qualsiasi utente CSS per principianti ed esperti.