Układ wielu kolumn (podobny do magazynu) Z CSS3
Ogólnie rzecz biorąc, ludzie tracą orientację podczas czytania bardzo długich treści. Dlatego w mediach drukowanych, takich jak czasopisma i gazety, treść jest podzielona na wiele kolumn w celu ułatwienia czytania.
Tworzenie kolumny w Internecie to zupełnie inna historia. To dość trudne. W rzeczywistości nie tak dawno trzeba może ręcznie podzielić zawartość na niektóre divs i unoś go w prawo lub w lewo, a następnie określ szerokość, dopełnienie, margines, granice i tak dalej.
Ale teraz rzeczy są znacznie uproszczone Moduł CSS3 Multi Column. Jak sama nazwa wskazuje, moduł ten pozwala nam dzielić zawartość na układ kolumnowy, który widzimy w gazetach lub czasopismach.
Obsługa przeglądarki
Wiele kolumn jest obecnie obsługiwanych we wszystkich przeglądarkach - Firefox 2+, Chrome 4+, Safari 3.1+ i Opera 11.1 - z wyjątkiem, jak przewidywano, Internet Explorer, ale wydaje się, że następna wersja IE10 zaczęła zapewniać obsługę tego modułu.
Dla pozostałych przeglądarek, aby działał, Firefox nadal potrzebuje -moz- prefiks, podczas gdy Chrome i Safari potrzebują -webkit- prefiks. Opera nie wymaga żadnych prefiksów, więc możemy po prostu użyć oficjalnych właściwości.
Źródło: Kiedy mogę używać CSS3 Układ wielu kolumn?
Utwórz wiele kolumn
Zanim utworzymy kolumny, przygotowaliśmy kilka akapitów tekstowych do demonstracji, zapakowanych w HTML5 tag, jak następuje;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae konsekwencja augue. //i tak dalej
… I określ szerokość dla 600px z arkusza stylów, to wszystko.
Teraz zacznijmy tworzyć kolumny.
W poniższym przykładzie podzielimy zawartość na dwie kolumny z liczba kolumn własność. Ta właściwość spowoduje, że przeglądarka wyrenderuje zawartość w kolumnach o określonej liczbie i pozwoli przeglądarce wybrać odpowiednią szerokość dla każdej kolumny.
artykuł -webkit-column-count: 2; -moz-column-count: 2; liczba kolumn: 2;
Oprócz zdefiniowania przez liczbę, kolumny można utworzyć, określając szerokość za pomocą szerokość kolumny właściwość i pozostawienie przeglądarki, aby zdecydować, ile kolumn należy wygenerować na miejscu.
W tym przykładzie określamy szerokość kolumny dla 150px, co spowodowało podzielenie treści na trzy kolumny.
artykuł -moz-column-width: 150px; -webkit-column-width: 150px; szerokość kolumny: 150px;
Jak podano w specyfikacji. rzeczywista szerokość kolumny może być szersza lub węższa niż określona szerokość kolumny w zależności od dostępnego miejsca. Ponadto, jeśli wartość szerokości nie jest wyraźnie określona, “automatyczny” będzie traktowane jako domyślne, co może również oznaczać “bez kolumny”.
Luka w kolumnie
Luka w kolumnie zdefiniuj przestrzenie oddzielające każdą kolumnę. Wartość luki można podać w em lub px, ale jak podano w specyfikacji wartość nie może być ujemna. W poniższym przykładzie określamy lukę dla 30px, więc przestrzenie między kolumnami wyglądają trochę szerzej.
artykuł -webkit-column-gap: 30px; -moz-column-gap: 30px; przerwa w kolumnie: 30px;
Reguła kolumny
Jeśli chcesz dodać obramowanie między kolumnami, możesz użyć reguła kolumnowa właściwość, która działa bardzo podobnie do granica własność. Powiedzmy, że jeśli chcemy umieścić kropkowaną granicę między kolumną, możemy napisać;
artykuł -moz-column-rule: 1px kropkowany #ccc; -webkit-column-rule: 1px kropkowana #ccc; reguła kolumny: 1px kropkowana #ccc;
Rozpiętość kolumny
Ta właściwość działa bardzo podobnie do colspan w stół etykietka. Powszechną implementacją tej właściwości jest rozciągnięcie nagłówka treści na wszystkie kolumny. Oto przykład.
artykuł h1 -webkit-column-span: all; zakres kolumn: wszystko;
W powyższym przykładzie zdefiniowaliśmy h1 rozciąga się na wszystkie kolumny i jeśli określono zakres kolumn, 1 będzie traktowane jako domyślne. Niestety ta własność w momencie pisania tego tekstu działa tylko w Operze i Chrome.
Ostatnie słowa
To wszystko na razie, przeszliśmy przez wszystkie niezbędne rzeczy, aby stworzyć wiele kolumn za pomocą CSS3, i jak wspomnieliśmy na początku, moduł ten działa bardzo dobrze w nowoczesnych przeglądarkach, ale nie działa jeszcze w Internet Explorerze.
Ostatecznie mamy nadzieję, że masz teraz dość dobrą wiedzę na temat tworzenia kolumn za pomocą CSS3, a jeśli masz czas na eksperymenty, nie krępuj się udostępniać metod i wyników w polu komentarza poniżej. Dziękujemy za przeczytanie tego postu i dobrą zabawę.
- Próbny
- Pobierz źródło
