logo4

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

Commenti   

0 #27 fiets kopen 3 jaar 2018-03-07 19:41
Kies dan voor een herenfiets de grotere framemaat.
Citazione
0 #26 網站行銷 2018-01-13 04:46
I'm more than happy to discover this site. I want to to thank you for ones time due to this fantastic read!!
I definitely really liked every part of it and i also have you saved as a favorite to check out new information on your website.
Citazione
0 #25 Leta 2017-12-04 20:21
Faça isso por regresso a 50 vezes ao data de outra maneira
melhor.
Citazione
0 #24 Repair Ecu 2017-11-12 01:11
It's awesome in favor of me to have a web page, which is good in favor of my know-how.
thanks admin
Citazione
0 #23 seo service 2017-10-24 05:40
In this proceѕs, you should add the url of thе different website plus much
the ѕame way; thе web sіte owner ѡill also еnable
you to aԀd the url of the website on his or her
sites. Make sure the title of your reѕpective maіn page
gets the keywords people would bе trying to find inside the
search engines. Significance օf Website Back-links and SEOYou could possibly be wondering how effective websites or webpаges can be without back-links and seo service
Citazione
0 #22 meandromeda.net 2017-10-17 11:24
Prettgy nice post. I just stumbled upon your weblog and wanted to say that I've truly
enjoyed surfing around your blog posts. After
all I'll be subscribing to your rss feed andd I hope you
write again soon!
Citazione
0 #21 broderie 2017-09-25 23:49
Its like you read my mind! You seem to know
a lot about this, like you wrote the book in it or something.
I think that you can do with a few pics to drive the message home
a bit, but instead of that, this is magnificent blog. A great read.
I will definitely be back.
Citazione
0 #20 Pino Cofano 2017-09-01 08:47
Citazione buy E Cigarettes:
Greetings! I know this is somewhat off topic but I was wondering which blog platform are you using for this website?
I'm getting sick and tired of Wordpress because I've had problems with hackrs and I'm looking at alternatives for another platform.

I would be great if you could point me in the direction oof a good
platform.


il sito è su piattaforma Joomla 3.x
Citazione
0 #19 buy E Cigarettes 2017-08-31 21:43
Greetings! I know this is somewhat off topic but I was wondering which blog platform are you using for this website?
I'm getting sick and tired of Wordpress because I've had problems with hackrs and I'm looking at alternatives for another platform.

I would be great if you could point me in the direction oof a good
platform.
Citazione
0 #18 Jmmy 2017-07-24 08:21
Yes, surely this:
https://www.aranzulla.it/
Citazione

Aggiungi commento

Critiche e correzioni sono ben accette e anzi incoraggiate, purché espresse in modo civile. Gli insulti personali, a me o ad altri, no. Regolatevi di conseguenza, se non volete che i vostri commenti vengano rimossi o rifiutati.
Nei casi più estremi ed evidentemente irrecuperabili, cioè le persone che si rifiutano pervicacemente di rispettare le regole di buona educazione, nonostante gli inviti alla moderazione prima e le cancellazioni dei commenti poi, è previsto, a nostro insindacabile giudizio, il ban definitivo dal blog.


Codice di sicurezza
Aggiorna