CSS due div fianco a fianco
Metodi per posizionare due Div fianco a fianco
Ci sono cinque diversi metodi disponibili in CSS per posizionare i due Div fianco a fianco:
- Display: metodo in linea blocco
- Visualizza: metodo della tabella
- Metodo float CSS
- Metodo CSS Flexbox
- Metodo della griglia CSS
Esempio n. 1: Utilizzo del display: metodo in linea
Iniziamo il nostro codice HTML aprendo un nuovo file nel codice Visual Studio e quindi selezionando la lingua HTML. Il file viene creato qui. Mettiamo il "!"Mark per ottenere i tag di base. Quindi, quando premiamo "Invio", tutti i tag di base di HTML appariranno sul file.
Iniziamo la nostra codifica dalla parte del corpo. Posizioniamo una voce e due diversi div qui. Posizioniamo questi due div fianchi di lato usando la proprietà "display: inline-block" in CSS. In questo file HTML, colleghiamo anche il file CSS prima del corpo e all'interno della "testa". Ora, spostati sul file CSS e guarda come utilizziamo questa proprietà per posizionare questi due diviedi fianco a fianco.
Qui, dopo aver menzionato il nome Div, apriamo le parentesi graffe ricci. All'interno di queste parenti ricci, utilizziamo la proprietà "display" di CSS. Dobbiamo posizionare il "blocco inline" come valore di questa proprietà "display". Questa proprietà "Display: inline-block" ci aiuta a posizionare due div, uno dopo l'altro. Questa proprietà "display: inline-block" non fornisce "altezza" e "larghezza", quindi dobbiamo menzionare le proprietà separate per impostare "altezza" e "larghezza". Abbiamo impostato la larghezza di entrambe le div usando la proprietà "larghezza" e la imposti su "150px". Abbiamo impostato l'altezza di entrambi i div su "100px". Lo "sfondo" di questi due div è "rosa". Il "bordo" che creiamo qui per entrambi i div è "2px" in larghezza, "viola" di colore e in tipo "solido". Mentre scriviamo un po 'di testo all'interno di questi div, impostiamo il testo sul "centro" del div usando la proprietà "allineate al testo". Abbiamo anche impostato la "dimensione del carattere" su "24px" e la "famiglie di carattere" su "algerina".
Nell'output, entrambi i div sono posti fianco perché abbiamo usato il metodo "display: blocco inline" su questi div. Entrambi i div sono resi qui dopo l'altro.
Esempio #2: Utilizzo del display: Metodo della tabella
In questo esempio, abbiamo un'intestazione e creiamo due div con il nome "cellula da tavolo" all'interno dei div principali che sono i div "contenitore" e "tavolo". Usiamo il display: proprietà tabella in CSS per rendere entrambi i div.
Iniziamo con lo stile dell'intestazione. Lo "stile del carattere" che usiamo qui per l'intestazione è "corsivo". Il "colore" che utilizziamo qui per l'intestazione è "marrone". E la "famiglia di carattere" che utilizziamo è "algerina". Quindi, abbiamo la classe "Container" di Div. Usiamo la proprietà "Display: Tabella" qui, quindi visualizzerà entrambi i div fianchi. Abbiamo impostato la "larghezza" su "40%". Quindi, per la "riva da tavolo", utilizziamo di nuovo la proprietà "display", ma qui, mettiamo la "Rolto da tavolo" come suo valore e la sua "altezza" è impostata su "130px".
Quindi, ci spostiamo sul div "cella da tavolo" e impostiamo alcune proprietà qui per questi due div. Creiamo un bordo per entrambi i div utilizzando la proprietà "bordo". Questo bordo è impostato su "2px" per la sua larghezza, "solido" per il suo tipo e "marrone" per il suo colore. Dopo questo, abbiamo impostato il suo "sfondo" per rendere attraenti quei div e usare un colore "salmone chiaro" per questa proprietà. Abbiamo anche impostato il "display" qui come "cella da tavolo". La "imbottitura" che utilizziamo qui è "2px". Inoltre, abbiamo del testo nei div. Appliciamo un po 'di stile al testo qui. La "famiglia di carattere" del testo è "algerina" e la loro "dimensione del carattere" è "25px". Allineiamo questi testi al "centro".
Quando abbiamo applicato il metodo "Display: Tabella" su questi div, appaiono fianco a fianco nell'uscita. Entrambi i div sono resi uno accanto all'altro.
Esempio n. 3: usando il metodo float
Qui, dopo l'intestazione, abbiamo un Div principale chiamato "Container" e abbiamo messo i due diversi div all'interno di questo div. Creiamo un div con il nome "St-box" e l'altro div chiamato "nd-box". Mettiamo anche i paragrafi all'interno di ogni div tranne il div principale. Useremo la proprietà Float CSS per impostare entrambi i diviedri.
Abbiamo impostato la "larghezza" e l'altezza "di" contenitore "posizionando i valori" 400px "e" 190px ", rispettivamente. Il "colore di sfondo" del contenitore è "verde". Il "imbottitura" è "20px" e "imbottitura-sinistra" e "imbottitura-destra" sono entrambi impostati su "15px" ciascuno. Ora impostiamo il div "st-box" e utilizziamo la proprietà "float". Qui, l'abbiamo impostato su "a sinistra".
La "larghezza" e "altezza" sono rispettivamente "180px" e "160px". Il "colore sfondo" di questo div "st-box" è "bianco" con un bordo di colore "nero" in tipo "solido". La "dimensione del carattere" per il paragrafo che abbiamo scritto in questo div è "18px". Le proprietà div "nd-box" sono le stesse del div "st-box" che abbiamo già spiegato qui. L'unica nuova proprietà che aggiungiamo qui è la proprietà "margine-sinistra" e la impostiamo su "20px". Accoldiamo anche un po 'la voce cambiando il suo "colore" su "verde". Il "Times New Roman" è selezionato qui come "Font-Family".
In questo screenshot puoi vedere che i due div appaiono qui fianco a fianco all'interno del div principale. Abbiamo usato la proprietà "float" in questo esempio per posizionare entrambi i div uno dopo l'altro.
Esempio n. 4: utilizzando il metodo Flexbox
Abbiamo un Div principale chiamato "Flex-Container" che contiene due div separati. Tranne il Div principale, abbiamo inserito alcuni paragrafi all'interno di ogni div. Entrambi i div verranno posizionati fianco a fianco usando il metodo CSS Flexbox in questo esempio.
Allineiamo l'intestazione nel "centro" e impostiamo la "famiglie del carattere" su "algerino". Citiamo la proprietà "Flex-Container" e inseriamo la proprietà "Display: Flex". Mettiamo questa proprietà nel contenitore in modo che la proprietà "Flex" metta l'elemento figlio in un contesto flessibile e allinea i div uno accanto all'altro. Per il "Flex-Child", mettiamo "Flex" e diamo "1" come valore. Creiamo il bordo attorno a ciascun div utilizzando la proprietà "bordo" e impostandolo in tipo solido "rosso". Abbiamo impostato la "dimensione del carattere" del paragrafo che è scritta all'interno dei div su "20px". Il "margine-destra" del "Flex-Child: First-Child" è impostato qui su "20px".
Questi div appaiono fianco a fianco nell'uscita perché abbiamo usato la proprietà "Flexbox" in questo esempio. Entrambi i div sono mostrati fianco a fianco.
Conclusione
Abbiamo creato questa guida per aiutarti a comprendere le proprietà CSS che aiutano a mettere due div fianchi. Questa guida ha superato questo argomento in modo approfondito. Abbiamo attraversato i metodi che vengono utilizzati per posizionare due Div fianco a fianco in CSS. Abbiamo spiegato che ci sono cinque proprietà per collocare due div fianchi. Abbiamo superato quattro diverse istanze in cui abbiamo usato le quattro proprietà del CSS per impostare i due div fianchi e fornito le uscite in modo da poter vedere come funzionano queste proprietà. Spero che sarai in grado di capire quali proprietà CSS vengono utilizzate per posizionare i div fianco a fianco in CSS e come usarli da solo.