CSS3 multi-column
Pagina di prova delle proprietà css3 per il modulo multi-column / Testing page for the property css3 multi-column
Compatibilità: Safari e Firefox con equivalenti css3 -webkit e -moz
Compatibility: Safari and Firefox with equivalent css3 -webkit and -moz
Ultimo aggiornamento / Last update: 05/09
IT: Articolo completo - EN: Full article
Regole css di base / Basic css rules:
.multi_column_css3{
border: 1px solid gray;
padding: 20px;
width: 800px;
}
column-count: 3;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
3 colonne specificate. La larghezza delle colonne si adatta automaticamente allo spazio disponibile
3 columns specified. The width of the columns adapts itself to the available space
column-width: 150px;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
Colonne di 150px specificate. Il numero di colonne si adatta automaticamente allo spazio disponibile
Column of 150px specificied. The number of columns adapts itself to the available space
column-gap: 20px; column-count: 3;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
3 colonne specificate con uno spazio di 20px tra di loro. La larghezza delle colonne si adatta automaticamente allo spazio disponibile
3 columns specified with a space of 20px in between them. The width of the columns adapts itself to the available space
column-rule: 2px solid black; column-gap: 20px; column-count: 3;
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
Una riga nera continua di 2px. Questa riga verticale si posiziona esatamente in mezzo dello spazio tra le colonne. Non visualizzato su Firefox.
A solid black line of 2px. This vertical line is positioned exactly in the middle of the space in between the columns. Not viewed on Firefox.
La seguente proprietà css3 column-span non è supportata / the following property css3 is not supported:
#multiColumn h2{column-span: 2;}
Sono un elemento h2 attraverso 2 colonne
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
Il contenuto dell'elemento h2 dovrebbe coprire la larghezza di 2 colonne
The content of the h2 element should cover the width of 2 columns