columns css3

10

Siden er opdateret d. 4. 9. 2015

Med columns kan man opsætte en given tekstblok i kolonner. Desværre virker det pt. (juli 2013) kun i Internet Explorer fra version 10. Firefox, Chrome og Safari kan bringes med ved at anvende et hack.

#demo {
columns:150px;
}

vil se sådan ud :

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.
#demo {
columns:3;
}

vil se sådan ud :

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.

De mulige værdier er:

count
hvor mange kolonner
fill
hvordan fordeles tekst i kolonner
gap
hvor stort mellemrum mellem kolonner
rule
hvor adskilles kolonner

rule-color
farven på stregen mellem kolonner
rule-style
udseende på stregen kolonner
rule-width
bredden på stregen kolonner
span
hvor mange kolonner skal en overskrift spænde over
width
kolonnebredde i pixels
Valid XHTML og CSS / Copyright © Erik Ginnerskov januar 2012
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - columns
sidens top
Brugere lige nu: 1
Home Mail