Nieruchomość włamać się do środka określa zasady rozmieszczania podziałów stron i kolumn w bieżącym elemencie. Domyślnie podziały stron lub kolumn są umieszczane automatycznie i nie są dziedziczone z elementów nadrzędnych. Wartość unikania strony jest używana tylko podczas formatowania dokumentów stronicowanych, na przykład podczas drukowania, i jest ignorowana w przypadku widoków niestronicowanych, na przykład podczas wyświetlania w przeglądarce. Wartość unikania kolumn jest używana w przypadku tekstu wielokolumnowego.

Prawidłowe wartości

• CSS2 CSS3 automatyczny- automatyczne dzielenie strony lub kolumny przed bieżącym elementem (domyślnie)
• CSS2 CSS3 unikać
• CSS3 unikaj strony- anuluj podział strony w bieżącym elemencie
• CSS3 Unikaj kolumny- anuluj podział kolumny wewnątrz bieżącego elementu

Przykłady użycia

włamanie: automatyczne; - równomierny rozkład

Jednolity rozkład treści pomiędzy kolumnami, w którym przerwy umieszczane są automatycznie w najbardziej odpowiednich miejscach w obrębie dowolnych elementów lub pomiędzy nimi. Przy równym rozkładzie wysokość kolumn jest w przybliżeniu taka sama, a gęstość tekstu jest mniej więcej jednolita.

Styl (liczba kolumn: 3; odstęp między kolumnami: 2em; reguła kolumny: 1px solid #666; )

Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

włamanie do środka: kolumna omijająca; - anuluj podziały kolumn

Styl (liczba kolumn: 3; odstęp między kolumnami: 2em; reguła-kolumny: 1px solid #666; ) .style div (break-inside: unikaj-kolumny; )

1. blok tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

2. blok tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Trzeci blok tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst

Właściwość break-inside jest zdefiniowana w specyfikacji modułu układu wielokolumnowego CSS 3, dotyczy elementów na poziomie bloków i obowiązuje na wszystkich nośnikach strony, jej wartość nie jest dziedziczona z elementu nadrzędnego w hierarchii dokumentu i domyślnie wynosi automatyczny. Właściwość jest obecnie obsługiwana we wszystkich głównych przeglądarkach.

Zobacz też:

• break-after - zasady ustawiania podziału kolumny lub strony po elemencie
• break-before - zasady ustawiania podziału kolumny lub strony przed elementem
• -webkit-column-break-after - reguły ustawiania podziału kolumny po elemencie
• -webkit-column-break-before - zasady ustawiania podziału kolumny przed elementem
• -webkit-column-break-inside - zasady ustawiania podziału kolumny wewnątrz elementu

Moduł Kolumny CSS3 opisuje układ wielokolumnowy, który pozwala organizować zawartość tak, aby obejmowała wiele pionowych kontenerów, podobnie jak gazeta lub czasopismo. Kolumny mogą zawierać nagłówki, tekst, tabele, obrazy i inne elementy wbudowane.

Model wielokolumnowy

Obsługa przeglądarki

TJ: 10
Krawędź: 12
Firefoksa: 52, 2 -moz
Chrom: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11,5 -webkit-
Safari na iOS: 9, 3.2 -webkit-
Przeglądarka UC dla Androida: 11.8
Chrome na Androida: 73
Internet Samsunga: 5, 4 -webkit-

Stary post

24 listopada 2012

15 najbardziej urokliwych małych miasteczek w Anglii

1. Berwick nad Tweedem

Berwick zostało założone jako osada anglosaska w czasach Królestwa Northumbrii, które zostało zaanektowane przez Anglię w X wieku. Przez ponad 400 lat obszar ten był centralnym miejscem historycznych wojen granicznych między królestwami Anglii i Szkocji, a posiadanie Berwick kilkakrotnie przechodziło z rąk do rąk między obydwoma królestwami. Ostatni raz zmienił właściciela w 1482 r., gdy Ryszard z Gloucester przejął go dla Anglii. Do dziś wielu mieszkańców Berwickers czuje bliskie powiązania ze Szkocją.

Obecnie Berwick-upon-Tweed jest często odwiedzane ze względu na swoją bardzo widoczną historię: między innymi średniowieczne mury miejskie, elżbietańskie mury obronne, ruiny zamku z XIII wieku, XVII-wieczny „Stary Most”, ratusz, najwcześniejsze koszary wojskowe w Wielkiej Brytanii, najbardziej na północ wysunięty hotel w Anglii. .

2.Żyto

Starożytne Rye to brukowane uliczki i walące się rzędy domów nad morzem. Pierwotnie część Konfederacji Cinque Ports, pięciu strategicznych miast ważnych dla celów handlowych i wojskowych w średniowieczu, dziś Rye jest praktycznie żywym muzeum. Zamek Rye, popularnie znany jako Wieża Ypres, został zbudowany w 1249 roku przez Henryka III w celu ochrony przed częstymi najazdami Francuzów; jeszcze starsza, normańska katedra św. Nad miastem góruje Kościół Mariacki. Rye znajduje się także zaledwie kilka minut od jednej z najsłynniejszych plaż w Anglii, Camber Sands, placu zabaw o długości dwóch mil dla kitesurferów i miłośników plaż.

Rysunek 1. Przykład układu wielokolumnowego

1. Liczba i szerokość kolumn

Określenie liczby i szerokości kolumn ma kluczowe znaczenie podczas tworzenia układu wielokolumnowego. Właściwości kolumny-count i kolumna-width służą do ustawiania liczby i szerokości kolumn.

Trzecia właściwość, kolumny, to skrócona właściwość, która określa szerokość i liczbę kolumn jednocześnie.

Inne czynniki, takie jak wyraźne podziały kolumn, ograniczenia dotyczące treści i wysokości, mogą mieć wpływ na rzeczywistą liczbę i szerokość kolumn.

1.1. Szerokość kolumny: właściwość szerokości kolumny

Właściwość kolumny-width określa minimalną szerokość, jaką powinna zajmować każda kolumna.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Szerokość kolumny: automatyczna; szerokość kolumny: 100px; szerokość kolumny: 10em; szerokość kolumny: 3,3vw; szerokość kolumny: dziedziczenie; szerokość kolumny: początkowa;

1.2. Liczba kolumn: właściwość liczby kolumn

Właściwość kolumny-count opisuje liczbę kolumn, a ich szerokość zostanie obliczona na podstawie szerokości dostępnego miejsca. Jeśli szerokość kolumny zostanie określona jednocześnie z liczbą kolumn, wówczas liczba kolumn zostanie uznana za maksymalną liczbę kolumn.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Liczba kolumn: auto; liczba kolumn: 2; liczba kolumn: dziedziczenie; liczba kolumn: początkowa;

1.3. Ustawianie kolumn przy użyciu właściwości pojedynczej kolumny

Właściwość kolumn jest skróconą właściwością służącą do ustawiania szerokości i liczby kolumn. Pominięte wartości są ustawiane na wartości początkowe.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Kolumny: 12em; /* szerokość kolumny: 12em; liczba kolumn: auto */ kolumny: auto 12em; /* szerokość kolumny: 12em; liczba kolumn: auto */ kolumny: 2; /* szerokość kolumny: auto; liczba kolumn: 2 */ kolumny: 2 auto; /* szerokość kolumny: auto; liczba kolumn: 2 */ kolumny: auto; /* szerokość kolumny: auto; liczba kolumn: auto */ kolumny: auto auto; /* szerokość kolumny: auto; liczba kolumn: auto */ kolumny: dziedziczą; kolumny: początkowe;

2. Odstępy między kolumnami i linie podziału

Odstępy między kolumnami i linie podziału są umieszczane pomiędzy kolumnami w jednym wielokolumnowym kontenerze. Długość spacji i separatorów jest równa wysokości kolumny. Luki w kolumnach zajmują miejsce, czyli odpychają zawartość sąsiednich kolumn.

Linia podziału jest rysowana pośrodku przestrzeni między kolumnami i nie zajmuje miejsca. Oznacza to, że obecność lub grubość linii podziału nie zmieni położenia czegokolwiek innego.

Linie są malowane tuż nad krawędzią elementu wielokolumnowego. Jeśli element ma obszar przewijalny, linie podziału przewijają się wraz z kolumnami. Linie rozdzielające pojawiają się tylko pomiędzy dwiema kolumnami zawierającymi treść.

2.1. Odstępy między kolumnami: właściwość odstępu między kolumnami

Właściwość kolumny-gap definiuje odstęp między kolumnami. Jeśli ustawisz linię podziału kolumn za pomocą właściwości kolumny-rule, wówczas linia ta będzie znajdować się w środku przerwy, a jej szerokość nie zmieni całkowitej szerokości.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Odstęp między kolumnami: normalny; odstęp między kolumnami: 3px; odstęp między kolumnami: 2,5 em; odstęp między kolumnami: 3%; przerwa między kolumnami: dziedzicz; przerwa między kolumnami: początkowa;

2.2. Kolor linii rozdzielającej: właściwość koloru reguły kolumny

Właściwość kolumny-rule-color określa kolor linii podziału.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Kolor reguły kolumny: różowy; kolor reguły kolumny: #D71C3B; kolor reguły kolumny: rgb(192, 56, 78); kolor reguły kolumny: przezroczysty; kolor reguły kolumny: hsla(0, 100%, 50%, 0,6); kolor reguły kolumny: dziedziczenie; kolor reguły kolumny: początkowy;

2.3. Styl linii rozdzielającej: właściwość stylu reguły kolumny

Właściwość kolumny-rule-style ustawia styl linii podziału.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Styl reguły kolumny: brak; styl reguły kolumny: ukryty; styl reguły kolumny: kropkowany; styl reguły kolumny: przerywany; styl reguły kolumny: solidny; styl reguły kolumny: double; styl reguły kolumny: rowek; styl reguły kolumny: grzbiet; styl reguły kolumny: wstawka; styl reguły kolumny: początek; styl reguły kolumnowej: dziedziczenie; styl reguły kolumny: początkowy;

2.4. Szerokość linii rozdzielającej: właściwość szerokości reguły kolumny

Właściwość kolumny-rule-width ustawia szerokość linii podziału. Wartości ujemne są niedozwolone. Nie działa bez właściwości stylu reguły kolumny.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Szerokość reguły kolumny: cienka; szerokość reguły kolumny: średnia; szerokość reguły kolumny: gruba; szerokość reguły kolumny: 1px; szerokość reguły kolumny: 2,5 em; szerokość reguły kolumny: dziedziczenie; szerokość reguły kolumny: początkowa;

2.5. Szybkie podsumowanie właściwości linii podziału: właściwość reguły kolumny

Właściwość kolumny-rule jest skrótem od właściwości kolumny-rule-width kolumny-rule-style kolumny-rule-koloru.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Linia kolumnowa: kropkowana; reguła kolumny: solidna 8px; reguła kolumny: jednolity niebieski; reguła kolumny: gruba wstawka w kolorze niebieskim; reguła kolumnowa: dziedzicz; reguła-kolumny: początkowa;

3. Podziały kolumn

Jeśli treść jest umieszczona w wielu kolumnach, przeglądarka musi określić, gdzie znajdują się podziały kolumn. Problem dzielenia treści na kolumny jest podobny do dzielenia treści na strony. Aby rozwiązać ten problem, wprowadzono trzy nowe właściwości umożliwiające opisanie podziałów kolumn za pomocą tych samych właściwości, co podziały stron: break-before, break-after i breakinside.

4. Rozpiętość kolumn: właściwość rozpiętości kolumn

Właściwość kolumny-span pozwala elementowi rozciągać się na wiele kolumn. Jest wskazany nie dla bloku kontenera, ale dla konkretnego elementu wewnątrz, na przykład dla nagłówka.

W przyszłości możliwe będzie określenie liczby kolumn, które mają być rozpięte, podobnie jak w przypadku atrybutu colspan, który można zastosować do komórki tabeli, ale specyfikacja CSS3 ma tylko dwie możliwe wartości: none i all .

Właściwość nie działa domyślnie w przeglądarce Firefox. Użytkownik musi jawnie włączyć tę funkcję, układ.css.column-span.enabled musi być ustawiony na true . Aby zmienić ustawienia w Firefoksie, przejdź do about:config.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Rozpiętość kolumn: brak; rozpiętość kolumn: wszystkie; zakres kolumn: dziedzicz; rozpiętość kolumn: początkowa;

5. Wypełnianie kolumn treścią: właściwość kolumny-fill

Właściwość kolumny-fill kontroluje sposób wypełniania kolumn treścią. Istnieją dwie strategie wypełniania kolumn: kolumny mogą być wyrównane do wysokości lub nie. Jeśli kolumny są wyrównane, przeglądarki powinny próbować minimalizować zmiany wysokości kolumn, biorąc pod uwagę wymuszone przerwy, wdowy, sieroty i inne właściwości, które mogą mieć wpływ na wysokość kolumny. Jeśli kolumny nie są wyrównane, wypełniane są sekwencyjnie, niektóre z nich mogą być wypełnione częściowo lub w ogóle nie wypełnione.

Nieruchomość nie podlega dziedziczeniu.

Składnia

Wypełnianie kolumn: automatyczne; wypełnienie kolumny: równowaga; wypełnienie kolumny: zrównoważenie wszystkiego; wypełnienie kolumny: dziedziczenie; wypełnienie kolumny: początkowe;

6. Przepełnienie

6.1. Przepełnienie wewnątrz pojemników wielokolumnowych

Z wyjątkiem sytuacji, w których spowodowałoby to przerwanie kolumny, treść wykraczająca poza granice kolumny wykracza poza jej granice i nie jest obcięta. Dotyczy to przede wszystkim obrazów. Aby rozwiązać ten problem, musisz ustawić następujące właściwości obrazów:

Img ( display: block; /*usuń dolne wypełnienie pod obrazem*/ szerokość: 100%; /*rozciągnij obraz na całą szerokość bloku kontenera*/ )

6.2. Paginacja i przepełnienie poza kontenerami wielokolumnowymi

Treść i linie podziału wystające poza kolumny na krawędziach kontenera wielokolumnowego są przycinane zgodnie z właściwością przepełnienia.

Kontener wielokolumnowy może mieć więcej kolumn, niż jest w nim miejsca, ze względu na ograniczenia dotyczące wysokości kolumn (takie jak wysokość lub maksymalna wysokość) i wyraźne podziały kolumn. W takim przypadku tworzone są dodatkowe kolumny w kierunku wiersza, przechodząc na kolejne strony.

The Moduł układu wielokolumnowego CSS rozciąga tryb układu blokowego aby umożliwić łatwe definiowanie wielu kolumn tekstu. Ludzie mają problemy z czytaniem tekstu, jeśli linie są za długie; jeśli przejście oczu od końca jednej linii do początku następnej zajmuje zbyt dużo czasu, tracą orientację, na której linii się znajdują. Dlatego, aby maksymalnie wykorzystać duży ekran, autorzy powinni umieszczać kolumny tekstu o ograniczonej szerokości obok siebie, tak jak ma to miejsce w przypadku gazet.

Niestety nie da się tego zrobić w CSS i HTML bez wymuszania podziału kolumn w ustalonych pozycjach, poważnego ograniczania dozwolonych znaczników w tekście lub stosowania heroicznych skryptów. To ograniczenie zostało rozwiązane poprzez dodanie nowych właściwości CSS w celu rozszerzenia tradycyjnego trybu układu blokowego.

Korzystanie z kolumn

Liczba i szerokość kolumn

Dwie właściwości CSS kontrolują, czy i ile kolumn się pojawi: kolumna-count i kolumna-szerokość.

Właściwość kolumny-count ustawia liczbę kolumn na określoną liczbę. Np.,

Przykład 1

HTML

CSS

Wynik

Wyświetli treść w dwóch kolumnach (jeśli używasz przeglądarki obsługującej wiele kolumn):

Właściwość kolumny szerokości ustawia minimalną żądaną szerokość kolumny. Jeśli nie ustawiono również liczby kolumn, przeglądarka automatycznie utworzy tyle kolumn, ile zmieści się w dostępnej szerokości.

Przykład 2

HTML

CSS

Wynik

W bloku wielokolumnowym treść jest automatycznie przepływana z jednej kolumny do drugiej, jeśli zajdzie taka potrzeba. W kolumnach obsługiwane są wszystkie funkcje HTML, CSS i DOM, podobnie jak edycja i drukowanie.

Skrót kolumn

W większości przypadków projektant stron internetowych będzie korzystał z jednej z dwóch właściwości CSS: kolumny-liczby lub szerokości kolumny. Ponieważ wartości tych właściwości nie pokrywają się, często wygodnie jest używać kolumn skróconych. Np.

Deklarację CSS kolumna szerokość: 12em można zastąpić kolumnami: 12em .

Przykład 3

HTML

CSS

Deklarację CSS Column-count: 4 można zastąpić kolumnami: 4 .

Przykład 4

HTML

CSS

Wynik

Dwie deklaracje CSS kolumna szerokość: 8em i liczba kolumn: 12 można zastąpić kolumnami: 12 8em .

Przykład 5

HTML

CSS

Wynik

Równoważenie wysokości

Specyfikacja kolumn CSS3 wymaga, aby wysokości kolumn były zrównoważone: to znaczy, że przeglądarka automatycznie ustawia maksymalną wysokość kolumn, tak aby wysokość zawartości w każdej kolumnie była w przybliżeniu równa. Firefox to robi.

Jednak w niektórych sytuacjach przydaje się również jawne ustawienie maksymalnej wysokości kolumn, a następnie rozłożenie treści zaczynając od pierwszej kolumny i tworząc tyle kolumn, ile potrzeba, ewentualnie przelewając się w prawo. Dlatego też, jeśli wysokość jest ograniczona, poprzez ustawienie właściwości CSS height lub max-height w bloku wielokolumnowym, każda kolumna może urosnąć do tej wysokości i nie dalej, przed dodaniem nowej kolumny. Ten tryb jest również znacznie bardziej efektywny w przypadku układu.

Luki w kolumnach

Pomiędzy kolumnami jest przerwa. Zalecaną wartością domyślną jest 1em. Rozmiar ten można zmienić, stosując właściwość odstępu między kolumnami do bloku wielokolumnowego:

Przykład 6

HTML

CSS

Wynik

Ładna degradacja

Właściwości kolumn zostaną po prostu zignorowane przez przeglądarki nieobsługujące kolumn. Dlatego stosunkowo łatwo jest utworzyć układ, który będzie wyświetlany w jednej kolumnie w tych przeglądarkach i będzie wykorzystywał wiele kolumn w obsługiwanych przeglądarkach.

Wniosek

Kolumny CSS3 to prymitywny układ, który pomoże twórcom stron internetowych jak najlepiej wykorzystać przestrzeń ekranu. Pomysłowi programiści mogą znaleźć dla nich wiele zastosowań, zwłaszcza dzięki funkcji automatycznego równoważenia wysokości.

Jak ułożyć tekst na stronie w kilku kolumnach? I czy można to zrobić automatycznie? Z pewnością wielu z Was, którzy są lub byli zaangażowani w tworzenie stron internetowych, spotkało się z tym problemem - i często natrafia na złożone rozwiązania, które wymagają skomplikowanych stylów lub użycia dodatkowych bibliotek JavaScript (patrz na przykład wtyczka Columnizer dla jQuery).

Wielokolumnowy układ treści (nie mylić z zadaniem ogólnego wielokolumnowego układu strony, któremu raczej bliżej do problemu układania bloków na siatce) już od dawna toruje sobie drogę w świecie standardów sieciowych i w końcu nie tylko osiągnął status Rekomendacji Kandydata w postaci odpowiedniego modułu CSS3 Multi -column Layout , ale także otrzymał dość szerokie wsparcie w przeglądarkach: gdzieś z przedrostkami (-moz- lub -webkit-) i gdzieś w bieżącym (Opera 11.1+) i wersje planowane (IE10+) i od razu bez prefiksów.

Komentarz
W przypadku przeglądarki Internet Explorer 10 oznacza to automatycznie, że można używać wielokolumnowego CSS3 podczas tworzenia aplikacji w stylu Metro dla Windows 8 przy użyciu HTML/CSS/JS.

Na potrzeby tego artykułu nie będę używać prefiksów przeglądarki, aby zmylić kod, ale w codziennym użyciu nie zapomnij dodać obsługi przedrostków w przeglądarkach Firefox, Safari i Chrome.

Od razu zwrócę uwagę na jeszcze dwa istotne szczegóły.
Po pierwsze, w większości przypadków zastosowanie wielokolumnowego układu tekstu można uznać za rozwinięcie sposobu wyświetlania treści witryny na ścieżce Progressive Enhancement, w ramach której użytkownicy nowszych witryn otrzymają więcej gadżetów:

Po drugie, wyświetlanie wielokolumnowe dobrze wpisuje się w możliwości Media Queries (i pomysły na responsywny projekt), np. przy różnych rozmiarach ekranu można sformatować tekst w różnej liczbie kolumn:

I ostatnia rzecz, na którą chciałbym zwrócić uwagę we wstępie, aby nie rozwodzić się nad tym dłużej i z czystym sumieniem przejść do szczegółów technicznych: stosując wielokolumnowy układ tekstu należy pamiętać, że taki układ zakłada również określonej kolejności czytania (w przypadku języków europejskich od lewej do prawej). Dlatego ważne jest, aby w celu przeniesienia spojrzenia z jednej kolumny na drugą konieczne było wykonanie jak najmniejszej liczby dodatkowych czynności, zwłaszcza jeśli chodzi o scrolle pionowe:

W tym sensie poziomy charakter kolumn lepiej łączy się z przewijaniem w poziomie (tak jak jest to stosowane w wielu aplikacjach Win8 - na przykład jest to wyraźnie widoczne w aplikacji USA Today):

Ogólnie rzecz biorąc, głośniki są świetne, ale nie zapominaj o wrażeniach użytkownika. A teraz do bitwy!

Kolumny

Aby zamienić taki element w wielokolumnowy, należy ustawić jedną z właściwości za pomocą stylów CSS: szerokość kolumny Lub liczba kolumn w innym znaczeniu niż automatyczny. Na przykład,
Aby podzielić tekst na dwie kolumny, po prostu wykonaj następujące czynności:

Artykuł ( liczba kolumn: 2; )

Przeglądarka zajmie się resztą:

Alternatywna nieruchomość - szerokość kolumny— umożliwia ustawienie optymalnej szerokości kolumny:

Artykuł (szerokość kolumny: 150px; )

W tym przypadku przeglądarka sama dzieli treść na wymaganą liczbę kolumn, aby wypełnić zewnętrzny kontener, dostosowując się do określonej szerokości kolumn. Ważne jest to szerokość rzeczywista może różnić się od podanej w górę lub w dół: na powyższym obrazku szary pasek ma szerokość dokładnie 150px - i jak widać jest mniejszy niż rzeczywista szerokość kolumny.

To zachowanie jest zdefiniowane w specyfikacji i pozwala (automatycznie) na większą elastyczność podczas opracowywania responsywnych znaczników:

Na przykład, jeśli masz kontener o szerokości 100 pikseli i ustawisz szerokość kolumn na 45 pikseli, przeglądarka uzna, że ​​zmieszczą się tylko dwie kolumny i aby wypełnić całą przestrzeń, zwiększy rozmiar każdej z nich do 50 pikseli. (Bierze to również pod uwagę odstęp między kolumnami, co zostanie omówione w następnej sekcji.)

W pewnym sensie można to postrzegać jako alternatywę dla używania zapytań o media do określania różnej liczby kolumn w zależności od rozmiaru okna i automatycznego obliczania szerokości kolumn:

@media (min-width:400px) ( artykuł ( liczba kolumn: 2; ) ) @media (min-width:600px) ( artykuł ( liczba kolumn: 3; ) ) ...

Po raz drugi mówię o alternatywie – i oto dlaczego.

liczyć vs. szerokość

• liczba kolumn pozwala określić liczbę kolumn, na które chcesz podzielić treść, natomiast szerokość kolumn określa przeglądarka, biorąc pod uwagę dostępną przestrzeń.
• szerokość kolumny pochodzi z drugiej strony: wskazuje w przybliżeniu, jakie powinny być kolumny, jednak obliczenie ich liczby pozostawia uznaniu przeglądarki.

Kolumny: 12em; /* szerokość kolumny: 12em; liczba kolumn: auto; */ kolumny: 2; /* szerokość kolumny: auto; liczba kolumn: 2; */ kolumny: auto; /* szerokość kolumny: auto; liczba kolumn: auto; */ kolumny: auto 12em; /* szerokość kolumny: 12em; liczba kolumn: auto; */ kolumny: 2 auto; /* szerokość kolumny: auto; liczba kolumn: 2; */

Co się stanie, jeśli określisz zarówno liczbę kolumn, jak i optymalną szerokość? W tym przypadku zgodnie ze specyfikacją liczba kolumn określa maksymalną liczbę kolumn:

Artykuł ( kolumny: 150px 3; /* szerokość kolumny: 150px; liczba kolumn: 3; */ )

W rzeczywistości, śledząc rozwój standardów internetowych, w tym niektóre moje artykuły na temat CSS3 (patrz na przykład), mam nadzieję, że nie mniej zainspirują Cię możliwości, jakie otwierają się przed twórcami stron internetowych. Adaptacyjne, elastyczne i wydajne narzędzia do zarządzania rozmieszczeniem treści stają się coraz bliższe i bardziej dostępne. A rozwiązywanie złożonych problemów staje się coraz łatwiejsze.

Interaktywny

Spróbuj, eksperymentuj. Zgłaszaj błędy twórcom przeglądarek. I nie zapomnij pomyśleć o tym, co zobaczą użytkownicy starszych (i pozornie nowoczesnych, ale wciąż nie w pełni zgodnych) przeglądarek – możesz na przykład użyć wtyczki do jQuery Columnizer. Pamiętaj o możliwościach adaptacji i widzach małych i dużych ekranów.

Jak ułożyć tekst na stronie w kilku kolumnach? I czy można to zrobić automatycznie? Z pewnością wielu z Was, którzy są lub byli zaangażowani w tworzenie stron internetowych, spotkało się z tym problemem - i często natrafia na złożone rozwiązania, które wymagają skomplikowanych stylów lub użycia dodatkowych bibliotek JavaScript (patrz na przykład wtyczka Columnizer dla jQuery).

Wielokolumnowy układ treści (nie mylić z zadaniem ogólnego wielokolumnowego układu strony, któremu raczej bliżej do problemu układania bloków na siatce) już od dawna toruje sobie drogę w świecie standardów sieciowych i w końcu nie tylko osiągnął status Rekomendacji Kandydata w postaci odpowiedniego modułu CSS3 Multi -column Layout , ale także otrzymał dość szerokie wsparcie w przeglądarkach: gdzieś z przedrostkami (-moz- lub -webkit-) i gdzieś w bieżącym (Opera 11.1+) i wersje planowane (IE10+) i od razu bez prefiksów.

Komentarz
W przypadku przeglądarki Internet Explorer 10 oznacza to automatycznie, że można używać wielokolumnowego CSS3 podczas tworzenia aplikacji w stylu Metro dla Windows 8 przy użyciu HTML/CSS/JS.

Na potrzeby tego artykułu nie będę używać prefiksów przeglądarki, aby zmylić kod, ale w codziennym użyciu nie zapomnij dodać obsługi przedrostków w przeglądarkach Firefox, Safari i Chrome.

Od razu zwrócę uwagę na jeszcze dwa istotne szczegóły.
Po pierwsze, w większości przypadków zastosowanie wielokolumnowego układu tekstu można uznać za rozwinięcie sposobu wyświetlania treści witryny na ścieżce Progressive Enhancement, w ramach której użytkownicy nowszych witryn otrzymają więcej gadżetów:

Po drugie, wyświetlanie wielokolumnowe dobrze wpisuje się w możliwości Media Queries (i pomysły na responsywny projekt), np. przy różnych rozmiarach ekranu można sformatować tekst w różnej liczbie kolumn:

I ostatnia rzecz, na którą chciałbym zwrócić uwagę we wstępie, aby nie rozwodzić się nad tym dłużej i z czystym sumieniem przejść do szczegółów technicznych: stosując wielokolumnowy układ tekstu należy pamiętać, że taki układ zakłada również określonej kolejności czytania (w przypadku języków europejskich od lewej do prawej). Dlatego ważne jest, aby w celu przeniesienia spojrzenia z jednej kolumny na drugą konieczne było wykonanie jak najmniejszej liczby dodatkowych czynności, zwłaszcza jeśli chodzi o scrolle pionowe:

W tym sensie poziomy charakter kolumn lepiej łączy się z przewijaniem w poziomie (tak jak jest to stosowane w wielu aplikacjach Win8 - na przykład jest to wyraźnie widoczne w aplikacji USA Today):

Ogólnie rzecz biorąc, głośniki są świetne, ale nie zapominaj o wrażeniach użytkownika. A teraz do bitwy!

Kolumny

Aby zamienić taki element w wielokolumnowy, należy ustawić jedną z właściwości za pomocą stylów CSS: szerokość kolumny Lub liczba kolumn w innym znaczeniu niż automatyczny. Na przykład,
Aby podzielić tekst na dwie kolumny, po prostu wykonaj następujące czynności:

Artykuł ( liczba kolumn: 2; )

Przeglądarka zajmie się resztą:

Alternatywna nieruchomość - szerokość kolumny— umożliwia ustawienie optymalnej szerokości kolumny:

Artykuł (szerokość kolumny: 150px; )

W tym przypadku przeglądarka sama dzieli treść na wymaganą liczbę kolumn, aby wypełnić zewnętrzny kontener, dostosowując się do określonej szerokości kolumn. Ważne jest to szerokość rzeczywista może różnić się od podanej w górę lub w dół: na powyższym obrazku szary pasek ma szerokość dokładnie 150px - i jak widać jest mniejszy niż rzeczywista szerokość kolumny.

To zachowanie jest zdefiniowane w specyfikacji i pozwala (automatycznie) na większą elastyczność podczas opracowywania responsywnych znaczników:

Na przykład, jeśli masz kontener o szerokości 100 pikseli i ustawisz szerokość kolumn na 45 pikseli, przeglądarka uzna, że ​​zmieszczą się tylko dwie kolumny i aby wypełnić całą przestrzeń, zwiększy rozmiar każdej z nich do 50 pikseli. (Bierze to również pod uwagę odstęp między kolumnami, co zostanie omówione w następnej sekcji.)

W pewnym sensie można to postrzegać jako alternatywę dla używania zapytań o media do określania różnej liczby kolumn w zależności od rozmiaru okna i automatycznego obliczania szerokości kolumn:

@media (min-width:400px) ( artykuł ( liczba kolumn: 2; ) ) @media (min-width:600px) ( artykuł ( liczba kolumn: 3; ) ) ...

Po raz drugi mówię o alternatywie – i oto dlaczego.

liczyć vs. szerokość

• liczba kolumn pozwala określić liczbę kolumn, na które chcesz podzielić treść, natomiast szerokość kolumn określa przeglądarka, biorąc pod uwagę dostępną przestrzeń.
• szerokość kolumny pochodzi z drugiej strony: wskazuje w przybliżeniu, jakie powinny być kolumny, jednak obliczenie ich liczby pozostawia uznaniu przeglądarki.

Kolumny: 12em; /* szerokość kolumny: 12em; liczba kolumn: auto; */ kolumny: 2; /* szerokość kolumny: auto; liczba kolumn: 2; */ kolumny: auto; /* szerokość kolumny: auto; liczba kolumn: auto; */ kolumny: auto 12em; /* szerokość kolumny: 12em; liczba kolumn: auto; */ kolumny: 2 auto; /* szerokość kolumny: auto; liczba kolumn: 2; */

Co się stanie, jeśli określisz zarówno liczbę kolumn, jak i optymalną szerokość? W tym przypadku zgodnie ze specyfikacją liczba kolumn określa maksymalną liczbę kolumn:

Artykuł ( kolumny: 150px 3; /* szerokość kolumny: 150px; liczba kolumn: 3; */ )

W rzeczywistości, śledząc rozwój standardów internetowych, w tym niektóre moje artykuły na temat CSS3 (patrz na przykład), mam nadzieję, że nie mniej zainspirują Cię możliwości, jakie otwierają się przed twórcami stron internetowych. Adaptacyjne, elastyczne i wydajne narzędzia do zarządzania rozmieszczeniem treści stają się coraz bliższe i bardziej dostępne. A rozwiązywanie złożonych problemów staje się coraz łatwiejsze.

Interaktywny

Spróbuj, eksperymentuj. Zgłaszaj błędy twórcom przeglądarek. I nie zapomnij pomyśleć o tym, co zobaczą użytkownicy starszych (i pozornie nowoczesnych, ale wciąż nie w pełni zgodnych) przeglądarek – możesz na przykład użyć wtyczki do jQuery Columnizer. Pamiętaj o możliwościach adaptacji i widzach małych i dużych ekranów.