logo4

EU e-Privacy Directive

Translate

itzh-CNenfrdejakoptrues

Gestire i Float CSS

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

L'attributo può assumere uno dei seguenti valori:

  • left
  • right
  • none

 

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>
g1Restante testo contenuto nel box principale

 

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>
g1Restante testo contenuto nel box principale

 

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>
g1 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