December 5
A differenza del suo omologo HTML, CSS è un linguaggio utilizzato dai progettisti per creare l'aspetto visivo di una pagina web. Float è una proprietà all'interno di CSS che definisce come gli elementi sono posizionati nel layout e tipicamente usata all'interno di un tag div. Ad esempio, è possibile usare "float: left" per creare un elenco di link che appaiono accanto alla principale area di testo contenuto di un layout a due colonne. Poiché la proprietà float assegna un elemento per il flusso di contenuti, è comune per il più a destra contenitore per "wrap" o scende sotto il primo se altre proprietà all'interno style dell'elemento non sono definiti correttamente.
1 Controlla il tuo ID o la dichiarazione della classe nel file CSS per una proprietà "clear". Questa proprietà forzerà l'elemento scendere sotto gli elementi sopra esso. Se non si desidera che l'elemento per avvolgere, chiaro deve essere rimosso. Un esempio di come questo potrebbe apparire segue:
elemento1 {
clear: both;
float: left;
}
2 Verificare che entrambi gli elementi destinati a sedersi accanto all'altro hanno la stessa struttura galleggiante. In un layout a due colonne, entrambi gli elementi usati per creare colonne di contenuti dovrebbe avere il "float: left;" proprietà.
elemento1 {
float: left;
}
element2 {
float: left;
}
3 Posizionare entrambi gli elementi mobili all'interno di un div "contenitore" che ha una larghezza minima impostata definito o che è maggiore della somma degli elementi mobili e tutte le imbottiture o il margine. Se carri impostato su una larghezza specifica non hanno abbastanza spazio per sedersi uno accanto all'altro, il galleggiante destro sarà costretto verso il basso.
CSS:
contenitore {min-width: 100px; ! Width: auto importante; width: 100px; } {Elemento1
float: left;
padding: 10px;
width: 210px;
}
element2 {
float: left;
padding: 10px;
margin-right: 20px;
width: 580px;
}
HTML:
<Div id = "container">
<Div id = "elemento1"> </ div>
<Div id = "element2"> </ div>
4 Assicurarsi che il contenuto dei vostri elementi mobili non è più largo degli elementi stessi o il contenitore. Il contenuto deve adattarsi nel suo elemento per evitare di essere spinto verso il basso o avvolto. Ad esempio, se lo spazio per i contenuti del vostro colonna di destra è a soli 580 pixel e non vi è una imbottitura 10 pixel e 20 pixel margine destro, qualsiasi elemento secondario o immagine non può superare i 540 pixel in larghezza.
5 Provare a utilizzare il "display: block;" proprietà se gli elementi continuano ad avvolgere e si è sicuri che il contenuto non è il problema. Questo fa sì che l'elemento da trattare nel suo complesso ed è il più efficace su elementi di testo come link di navigazione.
6 Aggiungere "display: inline" per carri in cui si dispone di un set di margine. Internet Explorer raddoppierà i margini fissati nella stessa direzione del galleggiante, che provoca avvolgimento.