Tekst w kolumnach – CSS3 – Multi Column

Pokażę sposób na ciekawe ułożenie tekstu na stronie, w kolumnach, które same się układają, takie multi column.

Dzięki takiemu rozwiązaniu zostanie więcej miejsca na stronie, a i fajnie to wygląda, nie trzeba pisać oddzielnych styli divów, automatycznie nam ułoży tekst.

 

W kodzie html wstawiamy:

<h2>Column count</h2>
<p class="multi-column1">Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.
</p>

<br>

<h2>Column width</h2>
<p class="multi-column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<br>

<h2>Column rules</h2>
<p class="multi-column2-bordered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

Wygląda to tak:

multi-column2

Są 3 opcje do wyboru. Powyżej umieściłam:
– column count (w stylach css wstawiamy liczbę z ilością kolumn, w tym przypadku 3)
– column width (w css wstawiamy szerokość kolumny, tutaj 200px każda)
– column rules (szerokość 200px i kolumny oddzielone linią)

Ale żeby to działało, należy jeszcze napisać style css:

.multi-column1{
		  -moz-column-count: 3;
		  -webkit-column-count: 3;
		  -moz-column-gap: 30px;
		  -webkit-column-gap: 30px;
		  text-align: justify;
}
		
.multi-column2{
		  -moz-column-width: 200px;
		  -webkit-column-width: 200px;
		  -moz-column-gap: 30px;
		  -webkit-column-gap: 30px;
		  text-align: justify;
}	

.multi-column2-bordered{
		  -moz-column-width: 200px;
		  -webkit-column-width: 200px;
		  -moz-column-gap: 30px;
		  -webkit-column-gap: 30px;		  
		  -moz-column-rule: 2px solid #9c9c9c;
                  -webkit-column-rule: 2px solid #9c9c9c;  		  
		  text-align: justify;
}				

Gotowe, nowy wymiar układania tekstu na stronę 🙂 A może i stary, ale ten na pewno szybszy i łatwiejszy 🙂

Podobne wpisy

Subscribe
Powiadom o
guest

4 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Kamil
7 lat temu

masz super bloga, dzięki za ten wpis, bardzo pomocny, pozdrawiam

Ania
6 lat temu

Niech bóg ci w czym sobie zapragniesz wynagrodzi dobra kobieto! <3

Mikołaj
5 lat temu

Super, niedawno zacząłem się uczyć HTML’a i CSS’a. Z pewnością przetestuje ten sposób, bo daje bardzo fajny efekt.
I fajnie, że wrzucasz cały kod potrzebny do tego 🙂