Come mettere due div Side by Side

October 17

Come mettere due div Side by Side


Un tag div viene utilizzato nella codifica HTML per designare un insieme di classi CSS per una parte della pagina web. Questo viene fatto collegando il documento HTML a un styelsheet CSS, che contiene informazioni sugli attributi dei vostri vari blocchi di contenuto. Queste classi sono quindi chiamati utilizzando un tag div nel documento HTML. Per inserire due tag div orizzontalmente uno accanto all'altro, è necessario utilizzare la proprietà float.

istruzione

1 Aprire un editor di testo, come Blocco note o modificare il testo. Vi sarà la creazione di un foglio di stile CSS. Se si dispone già di una fatta, aperto che invece.

2 Definire le proprietà dei due tag div. Sarà necessario a stare a galla uno a destra e uno a sinistra. Creare una classe denominata #left e mettere nel codice seguente:

sinistra {

width: 50%;

float: left;

}

Questo dirà il documento HTML che si desidera che la larghezza della vostra casella al 50% e di essere posizionato a sinistra. Si può modificare la larghezza e definirlo in termini di pixel o percentuale.

3 Creare una classe denominata #right e mettere nel codice seguente:

destra {

width: 50%;

float: right;

}

Questo dirà il documento HTML la stessa cosa di questa classe CSS, ma posizionerà il div a destra. Salvare il documento come "style.css" e chiuderlo fuori.

4 Aprire il documento HTML che si desidera inserire i tag div in. Assicurarsi che questo documento si trova nella stessa directory del foglio di stile. Nella parte superiore del documento, collegarlo al vostro foglio di stile creato:

<Head>

<Link rel = "stylesheet" type = "text / css" href = "style.css" />

</ Head>

5 Scorrere verso il basso e inserire un tag <body> per definire l'inizio della tua pagina web, se non ne hai già uno. Trovare il luogo in cui si desidera mettere i tag div e inserire <div id = "left"> Box sinistra Contenuto </ div> <div id = "right"> Box destro Content </ div>. È possibile inserire qualsiasi contenuto che si desidera all'interno di questi tag div; saranno affiancati l'uno accanto all'altro.

Consigli e avvertenze

  • È possibile utilizzare le classi CSS per definire tutta una serie di attributi, tra cui i colori di sfondo e bordi.
  • Non galleggiare due tag nella stessa direzione, o può causare problemi di cross-browser.