Come utilizzare la proprietÓ float per gestire la posizione dei box nel foglio.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 24 Jan 2017
aggiungi in preferiti  
Home    Mappa directory    Script




Float:


La proprietÓ float permette di posizionare un oggetto a destra o sinistra del contenitore.

L'attributo pu˛ assumere uno dei seguenti valori:



Left:

Con il parametro left spostiamo un oggetto a sinistra del blocco contenitore, lasciando che tutto il resto del contenuto si posizioni alla destra.

Esempi:
<div style="border:1px solid green;">
<div style="border:1px solid red; float:left;">
Contenuto del box con la proprietÓ float:left;
</div>
Restante testo contenuto nel box principale
</div>

Contenuto del box con la proprietÓ float:left;
Restante testo contenuto nel box principale

<div style="border:1px solid green; width:300px;">
<div style="border:1px solid red; float:left; width:150;">
Contenuto del box con la proprietÓ float:left;
</div>
Restante testo contenuto nel box principale
</div>

Contenuto del box con la proprietÓ float:left;
Restante testo contenuto nel box principale

<div style="border:1px solid green; width:300px; height:150px;">
<img src="prova1.jpg" alt="prova" style="border:1px solid red; float:left;">
Restante testo contenuto nel box principale
</div>

prova Restante testo contenuto nel box principale




Right:

Con il parametro right spostiamo un oggetto a destra del blocco contenitore, lasciando che tutto il resto del contenuto si posizioni alla sinistra.

Esempi:
<div style="border:1px solid green;">
<div style="border:1px solid red; float:right;">
Contenuto del box con la proprietÓ float:right;
</div>
Restante testo contenuto nel box principale
</div>

Contenuto del box con la proprietÓ float:right;
Restante testo contenuto nel box principale

<div style="border:1px solid green; width:300px;">
<div style="border:1px solid red; float:right; width:150;">
Contenuto del box con la proprietÓ float:right;
</div>
Restante testo contenuto nel box principale
</div>

Contenuto del box con la proprietÓ float:right;
Restante testo contenuto nel box principale


<div style="border:1px solid green; width:300px; height:150px;">
<img src="prova1.jpg" alt="prova" style="border:1px solid red; float:right;">
Restante testo contenuto nel box principale
</div>

prova Restante testo contenuto nel box principale




None:

Con il parametro none manteniamo la posizione di default.

Esempi:
<div style="border:1px solid green;">
<div style="border:1px solid red; float:none;">
Contenuto del box con la proprietÓ float:none;
</div>
Restante testo contenuto nel box principale
</div>

Contenuto del box con la proprietÓ float:none;
Restante testo contenuto nel box principale


<div style="border:1px solid green; width:300px; height:150px;">
<img src="prova1.jpg" alt="prova" style="border:1px solid red; float:none;">
Restante testo contenuto nel box principale
</div>

prova Restante testo contenuto nel box principale




<div float:left;> unito a <div float:right;>

Se poniamo i due attributi in due differenti box contenuti nello stesso box principale otteniamo un primo esempio di layout a tre colonne, formato ai lati con i due box float, e al centro dal box principale.

Esempio:
<div style="border:1px solid green;width:600px;">
<div style="border:1px solid red; float:left; width:200px;">
Contenuto del box con la proprietÓ float:left;
</div>
<div style="border:1px solid red; float:right; width:200px;">
Contenuto del box con la proprietÓ float:right;
</div>
Restante testo contenuto nel box principale
</div>

Contenuto del box con la proprietÓ float:left;
Contenuto del box con la proprietÓ float:right;
Restante testo contenuto nel box principale