Come rendere le colonne in una casella Div

May 28

Non è necessario creare tavoli per un layout a due colonne. È possibile creare loro con i fogli di stile a cascata (CSS). Ecco come creare una casella di div a livello 800-pixel con due colonne uguali che è al centro dello schermo del browser.

istruzione

1 Aprire il Blocco note o l'editor HTML e digitare quanto segue in un nuovo documento vuoto:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html>
<Head>

2 Avanti, digitare quanto segue:

<Style type = "text / css">
<! -

contenitore {

margin: 0 auto; /

Questo centra il contenitore div sulla pagina /
width: 800px;
}

leftcolumn {

float: left;
margin: 0;
width: 50%;
}

rightcolumn {

float: right;
margin: 0;
width: 50%;
display: inline;
}
// ->
</ Style>

3 Chiudere la sezione <head> con il seguente tag: </ head>

4 Terminate codifica il layout a due colonne con il seguente:
<Body>
<Div id = "container">

&lt;div id="leftcolumn">Put left column content here&lt;/div>
&lt;div id="rightcolumn">Put right column content here&lt;/div>

</ Div>
</ Body>
</ Html>

Consigli e avvertenze

  • Assicurarsi di aggiungere il doctype come la prima riga di codice. Doctype è il nome abbreviato per il Document Type Definition (DTD), che racconta i browser, i motori di ricerca e altri strumenti di analisi la pagina della versione di (X) HTML si sta usando. Questo imposta anche una modalità di analisi standard ed elimina le congetture per il browser o altro strumento di analisi tuo page.To mantenere il vostro codice compatibile con i nuovi standard Web, usare tutto in minuscolo per tutti i vostri HTML tags.Adjust gli stili a cascata nella <head > sezione per mettere creare uno sfondo per la pagina, impostare la dimensione del carattere e lo stile, mettere spazio intorno alle colonne, cadere un'immagine di sfondo o effettuare altre regolazioni estetici.
  • Assicurarsi di utilizzare il corretto Document Type Definition per il file HTML o non sarà visualizzato correttamente nel browser. Ci sono molti tipi di documenti HTML, con l'essere più comune: HTML 4.01 Strict, HTML 4.01 Transitional e XHTML 1.0 Strict.To creare spazio intorno le colonne, è necessario ridurre la larghezza di ogni colonna. Ad esempio, se si desidera un margine destro e sinistro di 10 pixel per ogni colonna, impostare la larghezza di ciascuna delle colonne a 380 px. Quindi, impostare i margini destro e sinistro a 10 px in stili a cascata. Altrimenti, la colonna di destra apparirà in basso sulla pagina di sinistra.