column-span css3
10 
4
Siden er opdateret d. 4. 9. 2015
Med column-span kan man definere, om en overskrift skal holdes over en enkelt kolonne eller spænde over flere eller alle kolonner. Desværre er det kun Internet Explorer fra version 10, der i øjeblikket forstår koden. Ved at anvende et hack (prefix), kan Chrome, Opera og Safari (-webkit-) bringes med.
#demo1 h3 {
-webkit-column-span: all; /* Chrome, Opera og Safari */
column-span: all;
}
#demo1 {
-webkit-column-count: 3; /* Chrome, Opera og Safari */
column-count: 3;
}
vil se sådan ud :
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi. In hac habitasse platea dictumst. Proin viverra pellentesque odio et laoreet. Nulla dignissim nulla sit amet sem euismod congue. Suspendisse iaculis viverra diam, vitae luctus mauris tincidunt a. Fusce pulvinar, erat non fringilla pharetra, mi tortor suscipit nunc, id rutrum erat justo a massa.
#demo2 h3 {
-webkit-column-span: 1; /* Chrome og Safari */
column-span: 1;
}
#demo2 {
-webkit-column-count: 3; /* Chrome og Safari */
column-count: 3;
}
vil se sådan ud :
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel diam dui, a eleifend nisi. Curabitur bibendum mi quis diam molestie vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi varius malesuada pulvinar. Nulla hendrerit placerat consectetur. Vestibulum consequat metus ut tortor ornare viverra. Ut et mauris mi. In hac habitasse platea dictumst. Proin viverra pellentesque odio et laoreet. Nulla dignissim nulla sit amet sem euismod congue. Suspendisse iaculis viverra diam, vitae luctus mauris tincidunt a. Fusce pulvinar, erat non fringilla pharetra, mi tortor suscipit nunc, id rutrum erat justo a massa.
