Il modo giusto per rendere Div 2 colonne

March 5

Il modo giusto per rendere Div 2 colonne


L'utilizzo di contenitori DIV nella pagina Web ti dà la possibilità di rompere i vincoli della forma tabellare tradizionale del Web design. Tuttavia, ci possono essere ancora casi in cui si desidera incorporare una struttura di tabella simile nel layout della pagina senza inserire un vero tag <table>. In questi casi, è possibile ottenere l'aspetto desiderato attraverso l'uso del "float" e elementi di stile "width" nel tag <div>.

istruzione

1 Creare una nuova pagina Web o aprirne uno esistente nel vostro editor di testo preferito.

2 Inserire il seguente codice all'interno della apertura e chiusura tag <body>:

<Div style = "width: 400px; float: left">

colonna 1

</ Div>

<Div style = "width: 200px; float: left">

colonna 2

</ Div>

3 Sostituire i valori dei due rispettivi elementi di stile "width" con i valori della tua scelta e aggiungere eventuali elementi di stile aggiuntivi che si desidera, come il tipo di carattere, dimensione del carattere, margini, padding e colori.

4 Sostituire il contenuto all'interno dei tag <div> con il contenuto della vostra scelta. È stato creato con successo un layout a due colonne, utilizzando solo i tag <div>.