CSS to divs side om side
Metoder for å plassere to divs side om side
Det er fem forskjellige metoder tilgjengelig i CSS for å plassere de to divs side om side:
- Display: Inline-block-metoden
- Display: Tabellmetode
- CSS Float Method
- CSS Flexbox -metode
- CSS -rutenettmetode
Eksempel 1: Bruke displayet: Inline-block-metoden
Vi starter HTML -koden vår ved å åpne en ny fil i Visual Studio -koden og deretter velge HTML -språket. Filen er opprettet her. Vi legger “!”Merk for å få de grunnleggende kodene. Så når vi trykker på "Enter", vises alle de grunnleggende kodene til HTML på filen.
Vi starter kodingen fra kroppsdelen. Vi plasserer en overskrift og to forskjellige div her. Vi plasserer disse to divene side om side ved hjelp av "Display: inline-block" -egenskapen i CSS. I denne HTML -filen kobler vi også CSS -filen før kroppen og inne i "hodet". Gå nå til CSS -filen og se på hvordan vi bruker denne egenskapen til å plassere disse to divene side om side.
Her, etter å ha nevnt DIV -navnet, åpner vi de krøllete seler. Inne i disse krøllete seler bruker vi "Display" -egenskapen til CSS. Vi må plassere "inline-block" som verdien av denne "display" -egenskapen. Denne "displayet: inline-block" -egenskapen hjelper oss med å plassere to div, den ene etter den andre. Denne "displayet: inline-block" -egenskapen gir ikke "høyden" og "bredden", så vi må nevne de separate egenskapene for å sette "høyden" og "bredden". Vi setter bredden på begge divene ved å bruke egenskapen "bredde" og sette den til "150px". Vi setter høyden på begge divene til “100px”. "Bakgrunnen" for disse to divene er "rosa". "Grensen" vi lager her for begge divene er "2px" i bredde, "lilla" i fargen og i "solid" type type. Når vi skriver litt tekst i disse divene, setter vi teksten på "senteret" av diven ved å bruke egenskapen "tekst-align". Vi setter også "fontstørrelsen" til "24px" og "font-family" til "Algerie".
I utgangen er begge divene plassert side om side fordi vi brukte metoden “Display: inline-block” på disse divene. Begge divene er gjengitt her etter hverandre.
Eksempel 2: Bruke displayet: Tabellmetode
I dette eksemplet har vi en overskrift, og vi lager to div med navnet "Table-cell" inne i hoveddivene som er "container" og "tabell-rad" -divene. Vi bruker skjermen: Tabellegenskaper i CSS for å gjengi begge divs side om side.
Vi starter med stylingen av overskriften. "Font-stilen" som vi bruker her for overskriften er "kursiv". "Fargen" som vi bruker her for overskriften er "maroon". Og "font-familiens" som vi bruker er "algerisk". Deretter har vi "container" -klassen Div. Vi bruker egenskapen "Display: Table" her, så den vil vise begge divs side om side. Vi setter "bredden" til "40%". Deretter, for "tabell-rad", bruker vi "display" -egenskapen igjen, men her legger vi "tabell-raden" ettersom dens verdi og dens "høyde" er satt til "130px".
Deretter flytter vi til "Table-Cell" -diven og setter noen egenskaper her for disse to divene. Vi skaper en grense for begge divene ved å bruke "grensen" -egenskapen. Denne grensen er satt til "2px" for sin bredde, "solid" for sin type, og "maroon" for fargen. Etter dette satte vi sin "bakgrunn" for å gjøre disse divene attraktive og bruke en "lett laks" -farge for denne egenskapen. Vi setter også "displayet" her som "tabellcellen". "Polstringen" som vi bruker her er "2px". Vi har også litt tekst i divene. Vi bruker litt styling på teksten her. "Font-family" av teksten er "algerisk" og deres "fontstørrelse" er "25px". Vi justerer disse tekstene til "sentrum".
Mens vi brukte metoden “Display: Table” på disse divene, vises de side om side i utgangen. Begge divene blir gjengitt ved siden av hverandre.
Eksempel nr. 3: Bruke float -metoden
Her, etter overskriften, har vi en hoveddiv som heter “Container”, og vi setter de to forskjellige divene inne i denne diven. Vi oppretter en div med navnet "st-box" og den andre div kalt "nd-box". Vi setter også avsnittene i hver div bortsett fra hoveddiven. Vi vil bruke CSS Float -egenskapen for å sette både divs side om side.
Vi setter "container" divens "bredde" og "høyde" ved å plassere verdiene “400px” og “190px”. "Bakgrunnsfargen" av beholderen er "grønn". "Padding-top" er "20px" og "padding-venstre" og "padding-høyre" er begge satt til "15px" hver. Nå setter vi "ST-Box" -diven og bruker "Float" -egenskapen. Her satte vi den til “igjen”.
"Bredde" og "høyde" er henholdsvis "180px" og "160px". "Bakgrunnsfargen" av denne "st-box" -diven er "hvit" med en kant av "svart" farge i "solid" type. "Font-size" for avsnittet som vi har skrevet i denne diven er "18px". "ND-Box" DIV-egenskapene er de samme som "ST-Box" -diven som vi allerede forklarte her. Den eneste nye eiendommen vi legger til her er "margin-venstre" -egenskapen, og vi setter den til "20px". Vi styler også overskriften litt ved å endre "farge" til "grønn". "Times New Roman" er valgt her som "Font-Family".
Du kan se i dette skjermbildet at de to divene vises her side om side inne i hoveddiven. Vi brukte "Float" -egenskapen i dette eksemplet for å plassere begge divene etter den andre.
Eksempel 4: Bruke Flexbox -metoden
Vi har en hoveddiv som heter “Flex-Container” som inneholder to separate divs. Bortsett fra hoveddiven, satte vi inn noen avsnitt i hver div. Begge DIV -ene vil bli plassert side om side ved hjelp av CSS Flexbox -metoden i dette eksemplet.
Vi justerer overskriften i "senteret" og setter "font-familiens" til "algerisk". Vi nevner "flex-container" og legger "display: flex" -egenskapen inne. Vi setter denne egenskapen i beholderen slik at "flex" -egenskapen setter barnelementet i en flex -kontekst og justerer divene ved siden av hverandre. For "flex-barnet" legger vi "flex" og gir "1" som verdien. Vi skaper grensen rundt hver div ved å bruke "grensen" -egenskapen og sette den til "rød" solid type. Vi setter avsnittets "font-size" som er skrevet inne i divene til "20px". "Margin-høyre" av "Flex-Child: First-Child" er satt til "20px".
Disse divene vises side om side i utgangen fordi vi brukte egenskapen "Flexbox" i dette eksemplet. Begge divene er vist side om side.
Konklusjon
Vi opprettet denne guiden for å hjelpe deg med å forstå CSS -egenskapene som hjelper til med å sette to divs side om side. Denne guiden har gått gjennom dette emnet i dybden. Vi har gått gjennom metodene som brukes til å plassere to divs side om side i CSS. Vi forklarte at det er fem egenskaper for å plassere to divs side om side. Vi gikk over fire forskjellige tilfeller der vi brukte de fire egenskapene til CSS for å sette de to divs side om side og ga utgangene slik at du kunne se hvordan disse egenskapene fungerer. Jeg håper du vil kunne finne ut hvilke CSS -egenskaper som brukes til å plassere divs side om side i CSS og hvordan du bruker dem på egen hånd.