Textflöde i flera kolumner (column-count)

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.

Nullam at lectus quam, vel molestie massa. Nunc dapibus tincidunt odio eget pulvinar. Nunc tempor eros sit amet erat feugiat sed lacinia dui interdum. Suspendisse eget consectetur lacus.

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.

Donec ac quam erat

Donec ac quam erat. Curabitur nec magna ac massa scelerisque imperdiet. Nulla eu libero at urna laoreet tempor dapibus non eros. Phasellus venenatis euismod nisl, et dignissim purus dapibus nec. Aenean ut orci arcu, et rutrum turpis.

CSS-kod

.kolumner3 {
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #000;
}

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.

Nullam at lectus quam, vel molestie massa. Nunc dapibus tincidunt odio eget pulvinar. Nunc tempor eros sit amet erat feugiat sed lacinia dui interdum. Suspendisse eget consectetur lacus.

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.

Donec ac quam erat

Donec ac quam erat. Curabitur nec magna ac massa scelerisque imperdiet. Nulla eu libero at urna laoreet tempor dapibus non eros. Phasellus venenatis euismod nisl, et dignissim purus dapibus nec. Aenean ut orci arcu, et rutrum turpis.

CSS-kod

.kolumner3 {
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #000;
column-width: 200px;
}

.kolumner3 h1 {
column-span: all;
}

CSS-kod:

.kolumner3 {
width: 80%;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.4);

-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule: 1px solid #000;
-ms-column-count: 3;
-ms-column-gap: 40px;
-ms-column-rule: 1px solid #000;
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule: 1px solid #000;
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #000;

}

.kolumner3 h1 {
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
font-size: 22px;
color: #D50000;
margin: 0;
padding: 0;
-webkit-column-span: all;
-ms-column-span: all;
-moz-column-span: all;
column-span: all;
}

HTML-kod:

<div class="kolumner3">
<p> Textinnehåll här.</p>
</div>