146 besökare, 1 medlem och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

Kolumner (column-count)

Du kan dela upp ett texflöde i kolumner. När textinnehållet når botten av kolumn 1 fortsätter innehållet högst upp i kolumn 2 osv. Den här metoden finns i ordbehandlingsprogram och desktop-publishing-program som används för tidninglayouter och böcker, men har inte funnits tidigare för HTML och CSS.

Egenskaper som kan anges för kolumnerna är:

column-count
Antal kolumner som ska användas
column-width 
Bredd på kolumnerna. OBS! Fungerar inte i alla webbläsare.
column-gap
Avstånd mellan kolumnerna.
column-rule-width 
Bredd på den kantlinje som kan användas mellan kolumnerna.
column-rule-style 
Typ av kantlinje som ska användas. Samma attribut som för border kan användas:
dotted, dashed, solid, double, groove, ridge, inset, outset
column-rule-color 
Färg på kantlinjen.
column-span 
Antal kolumner som ett element, tex rubrik, ska sträcka sig över. Samma funktion som colspan och rowspan i tabeller. OBS! column-span fungerar inte på element som använder float eller absolut positionering.
Firefox söder inte column-span

 

Exemplet nedan använder column-count på en Box (DIV):

Använd CSS3 för att få textflöde över flera kolumner!

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra, ligula in ullamcorper pulvinar, elit libero porta orci, nec tincidunt diam ante in leo.

Class aptent

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi orci dolor, condimentum in vehicula rhoncus, tincidunt a magna.

Fusce imperdiet malesuada accumsan. Duis blandit orci eu nibh vehicula elementum. Nam sem mauris, mollis et ullamcorper sit amet, venenatis id urna.

Nulla quis turpis sit amet justo adipiscing viverra vitae non dui.

Pellentesque quis

Pellentesque quis urna nisl. Nunc tincidunt nibh id turpis condimentum ac imperdiet ipsum posuere. Maecenas fermentum, magna eu suscipit suscipit, eros diam elementum nibh, imperdiet gravida mauris odio ac velit.

Quisque sit amet mauris lectus

Quisque sit amet mauris lectus. Suspendisse semper iaculis porttitor. Donec ultricies, augue id vulputate sollicitudin, quam enim feugiat lacus, sit amet ornare risus est viverra ligula.

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.kolumner3 {
width: 650px;
margin: 10px 0 10px 0;
padding: 20px;
background-color: #BAD1BA;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #000
}

HTML-koden:

<div class="kolumner3">
Text och innehåll här.
</div>