CSS column-span
La proprietà CSS3 column-span permette a un elemento di estendersi su tutte le colonne
La proprietà column-span è parte del modulo CSS3 Multi-column Layout e consente a un elemento di ignorare la divisione in colonne del contenitore, estendendosi su tutte. È utile per titoli, sottotitoli o elementi decorativi all'interno di layout multi-colonna.
Sintassi
Significato dei valori principali:
-
none: (valore predefinito) l'elemento non si estende oltre la colonna in cui si trova.
-
all: l'elemento si estende su tutte le colonne del contenitore multicolonna.
Esempio proprietà: column-span
Codice Esempio: column-span
.multicol-container {
column-count: 3;
column-gap: 20px;
padding: 20px;
background-color: #fafafa;
}.column-span-header {
column-span: all;
background-color: #50a14f;
color: white;
padding: 10px;
font-size: 20px;
text-align: center;
margin-bottom: 15px;
border-radius: 6px;
}.column-content {
font-size: 16px;
line-height: 1.6;
}
Contenuto Esempio: column-span
Esempio di utilizzo di column-span
In questo esempio, un titolo si estende su tutte le colonne grazie a column-span: all;:
CSS e HTML per l'esempio:
<style>
.multicol-container {
column-count: 3;
column-gap: 20px;
padding: 20px;
background-color: #fafafa;
}
.column-span-header {
column-span: all;
background-color: #50a14f;
color: white;
padding: 10px;
font-size: 20px;
text-align: center;
margin-bottom: 15px;
border-radius: 6px;
}
.column-content {
font-size: 16px;
line-height: 1.6;
}
</style>
<div class="multicol-container">
<div class="column-span-header">Titolo che si Estende su Tutte le Colonne</div>
<div class="column-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 18.97.14.88
