CSS
Wiele kolumn
Szukaj…
Wprowadzenie
CSS pozwala zdefiniować zawijanie zawartości elementu do wielu kolumn z przerwami i regułami między nimi.
Uwagi
Wielokolumnowy moduł układu CSS Poziom 1 jest, od 12 kwietnia 2011 r., Rekomendacją dla kandydatów W3C. Od tego czasu wprowadzono kilka mniejszych zmian . Uważa się, że jest w fazie stabilnej .
Od 3 lipca 2017 r. Przeglądarki Microsoft Internet Explorer 10 i 11 oraz Edge obsługują tylko starszą wersję specyfikacji, używając prefiksu dostawcy.
Podstawowy przykład
Rozważ następujące znaczniki HTML:
<section>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>
Po zastosowaniu następującego CSS zawartość jest dzielona na trzy kolumny oddzielone szarą regułą kolumny z dwoma pikselami.
section {
columns: 3;
column-gap: 40px;
column-rule: 2px solid gray;
}
Zobacz próbkę na żywo na JSFiddle .
Utwórz wiele kolumn
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer possim assum.
</div>
Css
.content {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow