July 21
Float e in linea si comportano in modo simile a CSS - entrambi permettono di allineare gli elementi in fila. Float è una proprietà per i CSS, mentre la linea è in realtà un valore per la proprietà "display". Entrambi gli elementi sono supportati in tutti i principali browser, tra cui Internet Explorer, Firefox, Safari e Chrome. Questo supporto li rende entrambe le opzioni valide per l'allineamento layout di pagina.
Utilizzando il "galleggiare" o "in linea" modificare l'allineamento di default e il comportamento dei vari elementi. Il comportamento predefinito per un elemento varia a seconda di cosa si tratta. Immagini visualizzate in linea di default se non è separata da una linea o interruzione di pagina, mentre gli strati div impilare in verticale, anche quando affiancato nel sorgente della pagina. I paragrafi, per definizione, iniziano una nuova linea di ciascuno. Tutto allinea alla sinistra, salvo altrimenti designato.
Ci sono due opzioni per gli elementi galleggianti: galleggiare a sinistra oa destra galleggiante. Quando si dispone di due elementi accanto a ogni altro insieme di galleggiare a sinistra, si sostituisce il comportamento e le linee di default gli elementi side-by-side, senza alcuna distanza tra i due. Il primo elemento nella tua sorgente della pagina sarà la più lontana sinistra, con ogni elemento della lista in fila in ordine sequenziale. Se la larghezza degli elementi galleggianti superi la larghezza della pagina, faranno avvolgono alla riga successiva. Elementi impostati a destra galleggiante farà lo stesso in senso inverso, con il primo elemento più lontano a destra. Due 200 pixel di larghezza strati DIV impostato a galleggiare sinistra sarebbe simile a questa:
<Div style = "float: left; width: 200;"> Elemento 1 </ div>
<Div style = "float: left; width: 200;"> Element 2 </ div>
Inline è parte della proprietà "display". Questo fa esattamente quello che sembra: si allinea gli elementi in fila, anche se altrimenti non sarebbe, come nel caso di tre paragrafi. In linea è simile a galleggiante, con alcune piccole differenze. elementi in linea linea solo sulla sinistra e lasciare spazio tra ogni elemento, mentre gli elementi galleggianti premere proprio contro l'altro senza alcun spazio. Un esempio di due paragrafi impostati per allineare utilizzando la proprietà in linea è:
<P style = "display: inline;"> Paragrafo 1 </ p>
<P style = "display: inline;"> Paragrafo 2 </ p>
Non c'è scelta sbagliata quando si sceglie un attributo di posizionamento per il layout sito web. Visualizzazione elementi in linea è un modo semplice per strutturare i contenuti del sito che è più flessibile di posizionamento assoluto. Giocare con il posizionamento di vedere cosa funziona meglio per il layout, e testare il layout in diversi browser per assicurarsi che la posizione è accurata su tutta la linea.