HTML div tag definiscono il layout delle pagine Web. fogli di stile CSS sono utilizzati per lo styling tag HTML nelle pagine Web. L ' "id" o proprietà "classe" dei tag HTML sono chiamati all'interno di CSS per applicare determinati stili di tag HTML. Gli stili che sono comuni a diversi tag div possono essere assegnati a una proprietà di "classe", mentre stili unici dovrebbero essere assegnati al "id" di proprietà del particolare tag div, in quanto ogni modifica di identificazione può può essere utilizzato solo una volta. appariranno elementi div adiacenti sotto l'elemento div precedente di default, a meno stile di allineare in senso orizzontale.

istruzione

Definire posizioni assolute per tag div

1 Aprire la pagina HTML e il file CSS allegato in due finestre differenti in un editor HTML o editor di testo di base, come ad esempio il blocco note.

2 Individuare tutti i tag div che deve essere allineato e assegnare il nome univoco di classe "halign":

<Div class = "halign"> Primo div </ div>

<Div class = "halign"> Seconda div </ div>

<Div class = "halign"> Terzo div </ div>

Se "halign" è già stato usato come un nome di classe in altre parti del HTML, utilizzare un nome diverso, ma assicurarsi che sia unico.

3 Assegnare nomi "id" per tutti gli elementi div che devono essere allineati. Includere numeri all'interno i nomi "ID" per identificare l'ordine di posizionamento. In alternativa assegnare "box1", "box2" e così via, come "nomi id":

<Div id = "box1" class = "halign"> Primo div </ div>

<Div id = "box2" class = "halign"> Seconda div </ div>

<Div id = "box3" class = "halign"> Terzo div </ div>

Se i nomi di "ID" sono già stati assegnati, quindi prendere nota dei nomi "id" esistenti.

4 Vai al file CSS e inserto:

.halign {position: absolute; top: XXX; }

Sostituire "XXX" con il valore del margine tra il top assoluto e la linea di allineamento orizzontale. Utilizzare i valori dei pixel o percentuali, a seconda di altri elementi div che vengono posti al di sopra della classe "halign".

5 Modifica di blocchi singoli stile div in CSS. Trova le div "ID" nomi del CSS e aggiungere la "sinistra: YYY;" linea di codice all'interno di ogni blocco di codice. Sostituire "YYY" con i margini assoluti a sinistra degli elementi div. margine assoluto è lo spazio totale dal bordo dello schermo del browser verso il div corrispondente. I margini saliranno per div a metterli fianco a fianco:

box1 {margin-left: 100px; } Box2 {margin-left: 400px; } Box3 {margin-left: 700px; }

Float elementi DIV

6 Aprire il file CSS in una finestra di editor di testo.

7 Definire un nome univoco "di classe", come ad esempio come "halign," e inserire "float: left;" nel blocco di codice e salvare il file.

8 Aprire il codice HTML in una diversa finestra di editor di testo e assicurarsi che tutti gli elementi div che devono essere allineati sono posti adiacenti.

9 Attaccare il nome "di classe" "halign" per gli elementi div adiacenti che devono essere allineati.

10 Inserire il codice seguente al di sopra del gruppo di elementi div in HTML:

<Div style = "clear: both;"> </ div>