column-rule css3

10

Siden er opdateret d. 4. 9. 2015

Med column-rule kan man sætte en lodret streg mellem kolonner. Der defineres værdier på samme måde som med border: width style color (tykkelse stil farve). Desværre virker det pt. (september 2015) kun i Internet Explorer fra version 10. Chrom,e Firefox, Opera og Safari kan bringes med ved at anvende et hack.

#demo {
column-count: 3;
column-rule: 1px solid #000;
}

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 for style er:

dashed
stregen tegnes som en serie korte linjestykker
dotted
stregen tegnes som en serie punkter
double
stregen tegnes som to linjer á ens tykkelse med et mellemrum på samme tykkelse
groove
stregen tegnessom en graveret rille
inset
stregen tegnes
outset
stregen tegnes
ridge
stregen tegnessom en ophøjet kant
solid
stregen tegnes som en ubrudt flad steg

#style1 {
column-count: 3;
column-rule: 3px dashed #aad;
}

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.
#style2 {
column-count: 3;
column-rule: 3px dotted #aad;
}

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.
#style3 {
column-count: 3;
column-rule: 3px double #aad;
}

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.
#style4 {
column-count: 3;
column-rule: 3px groove #aad;
}

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.
#style5 {
column-count: 3;
column-rule: 3px ridge #aad;
}

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.
#style6 {
column-count: 3;
column-rule: 3px solid #aad;
}

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.
Valid XHTML og CSS / Copyright © Erik Ginnerskov januar 2012
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - column-rule
sidens top
Brugere lige nu: 1
Home Mail