CSS trekker til høyre
Eksempel 01:
Innenfor vårt første eksempel vil vi bruke float -egenskapen til å trekke de forskjellige elementene til høyre, venstre og ingen steder. Vi vil også sammenligne disse egenskapene med hverandre for en bedre forståelse. Vi starter vårt første eksempel med standard HTML-dokumentformat som brukes til å lage eventuelle HTML-baserte nettsider. Hovedtaggen inneholder tittelen på HTML -siden som skal opprettes ved hjelp av en intern "tittel" -kode. Etter dette har vi en stilkode og hovedkroppskoden. Før vi ser på CSS -stylingen av en HTML -side, må vi se på kroppen som kommer til å bli stylet. Liket på denne HTML -siden inneholder den enkle størrelsen 1 -overskriften og den viktigste "div" -merket for å opprette en seksjon på HTML -siden. Denne "div" -merket er spesifisert med "A" -klassen for differensieringen mens du styles. Innenfor denne delen har vi 3 flere "div" -elementer som brukes her.
Alle de tre DIV-seksjonene er spesifisert med tre forskjellige klasser-flyte-venstre, flyte-høyre og flyte-ingen. Etter å ha stengt disse tre “div” -seksjonene, lukker vi også hoved "div" -delen. Avslutningen av Main Div -seksjonen blir fulgt av “Body” -merket til denne HTML. Kroppen og dens elementdel er nå fullført. For å få noen seksjoner til å trekke til høyre eller venstre, må vi style dem deretter. I stilkoden til HTML -koden bruker vi således “A” -klassen for den første “Div” -delen for å plassere den i forhold til HTML -siden via “Position” -egenskapen.
Denne hoveddelen er også 400 piksler i bredde og høyde med en solid kant på 3 piksler i brun farge. Etter dette bruker vi float-venstre, flyte-høyre og flyte-ikke-klasser for de indre "div" -seksjonene for å style dem deretter. Float -egenskapen brukes til den første indre div -delen for å trekke den til den nøyaktige høyre for HTML -siden. Denne delen inneholder også 100 piksler bredde, 120 piksler høyde og en stiplet kant på 3px i fast blå farge. Den andre indre "div" er posisjonert til relativ og trukket mot venstre for HTML -siden ved hjelp av float -egenskapen. Den har 200px bredde, 120px høyde, med 3px solid grønt kant. Den siste indre seksjonen inneholder en absolutt posisjon uten spesifisert trekkegenskap. Den har også 3px fast brun kant, 100px bredde og 100px høyde. Denne koden er klar til å brukes på Chrome -nettleseren via Visual Studio -koden for å se stylingen.
Når vi utfører den i Chrome -nettleseren, får vi følgende utgang. Hoveddiv -seksjonen vises med en solid rød kant, og dens posisjon er i forhold til HTML -siden. Mens den blåfargede DIV-delen av den stiplede grensen trekkes til høyre ved bruk av "Float" -egenskapen i CSS for denne koden som vist på bildet. Den grønnfargede DIV-delen trekkes til venstre ved hjelp av "Float" -egenskapen, og den er i forhold til HTML-siden. Posisjonen til den brune "div" -delen er spesifisert som relativ og vises i bildet.
Eksempel 02:
La oss komme i gang med et annet eksempel på å bruke float -egenskapen til CSS for å trekke elementene i HTML til høyre eller venstre. Denne koden starter med den samme HTML -taggen som følger "Head" -koden som inneholder tittelen for denne HTML -siden, i.e. “CSS trekker til høyre”. For å legge til en tittel for denne siden, bruker vi tittelkoden. Vi må se godt på kroppsdelen av HTML -skriptet vårt først. Vi legger til en overskrift til kroppen på HTML -siden ved å bruke "H1" overskriftskoden, i.e. stor størrelse overskrift.
Etter dette prøver vi en "seksjon" -merke i denne HTML -koden. Denne delen taggen brukes til å lage en seksjon i kroppen til HTML -siden. Innenfor denne delen bruker vi tre nye “Div” -elementer og ett avsnittelement. Begge de første DIV-kodene bruker den samme klassen “Left-Pull” mens den tredje Div-taggen bruker en annen klasse “Right-Pull” i åpningskoden. De to første DIV -tagene inneholder enkle tekster i dem mens den tredje div -taggen inneholder et bilde "IMG" -kode for å legge til bildet i denne DIV -delen. Kilden til dette bildet er vårt lokale system, og det er i "JPG" -format. Avsnittet inneholder også en enkel tekstlinje i den.
Etter avslutningen av alle 3 DIV -tagger og avsnitts -taggen, endte seksjonskoden vår her med avslutningen. Kroppen til denne HTML -siden er fullført nå. Lukk "kropp" -merket. Innenfor "stil" -merket til denne HTML -koden for styling, spesifiserer vi elementet "delen" for å style dets indre elementer kombinert om gangen. Denne seksjonsstørrelsen er definert av “Border-Box” -formatet, og den inneholder den stiplede 5-piksler grensen rundt den. Bredden på denne delen er 50 prosent mens den trekkes til venstre via "Float" -egenskapen. "Div" -elementene er stylet med 5px margin, 200px bredde og 150px høyde for alle. Div-elementene som inneholder "venstre-pull" -klassen vises i venstre posisjon med den terosa bakgrunnen.
Mens Div-elementene med "Right-Pull" -klassen blir trukket til høyre ved bruk av "Float" -egenskapen og bakgrunnen er satt til nær himmelblå farge. Koden vår er fullført og er klar til bruk i Visual Studio -koden via "Kjør" -menyen etter alternativet "Start feilsøking".
Utgangen for denne koden viser den enkle overskriften og en ny stiplet del generert på HTML -siden. Denne delen inneholder tre forskjellige DIV -seksjoner i den. De to første DIV -seksjonene blir trukket til venstre med den terosa bakgrunnsfargen. Mens den tredje div -delen inneholder et bilde trukket mot høyre for denne HTML -siden.
Konklusjon
Vi diskuterte behovet og bruken av å trekke elementene på HTML -siden innenfor vårt innledende avsnitt. Denne artikkelen viser en veldig klar demonstrasjon av å trekke CSS -elementene til venstre, høyre eller ingen via CSS “Float” -egenskap. Det brukes i alle eksemplene for å trekke disse elementene i noen spesifikk retning med bruk av klasser i DIV -seksjonene. Alle eksemplene dekket i denne artikkelen er ganske enkle og enkle å forstå for enhver nybegynner og ekspert CSS -bruker.