Трепачев Д.П. 2012-2020 г
Към учениците: Имам ваканция до 6 януари, през ваканцията ще отговарям максимално,
понякога мога да изчезна за няколко дни
свойство брой колони
Синтаксис
Селектор (брой колони: номер | автоматично;)
Стойности
Стойност по подразбиране: Автоматичен.
Пример
В този пример текстът ще бъде разделен на 3 колони(разбира се, в браузъри, които поддържат няколко колони, в други ще има само обикновен текст в една колона):
Пример. Автоматична стойност
В този пример ширината на колоната column-width е посочена в 150 пиксела, и техния брой колона-бройстои по смисъл Автоматичен- браузърът сам ще избере необходимия брой колони и разстоянието между тях:
Как да подредя текст на страница в няколко колони? И може ли това да стане автоматично? Със сигурност много от вас, които се занимават или са се занимавали с уеб разработка, са се сблъсквали с такава задача - и често срещат проблеми комплексни решения, изискващи сложни стилове или използването на допълнителни JavaScript библиотеки (вижте например приставката Columnizer за jQuery).
Оформлението на съдържанието с много колони (да не се бърка със задачата за общо оформление на страници с много колони, което е доста по-близко до проблема с подреждането на блокове в мрежа) си проправя път в света на уеб стандартите от дълго време и накрая, не само достигна статус на препоръка за кандидат под формата на съответния CSS3 Multi module -column Layout, но също така получи доста широка поддръжка в браузърите: някъде с префикси (-moz- или -webkit-) и някъде в текущия (Opera 11.1+) и планирани версии (IE10+) и веднага без префикси.
Коментирайте
В случая на Internet Explorer 10 това автоматично означава, че можете да използвате CSS3 Multi-column, когато разработвате приложения в стил Metro за Windows 8, като използвате HTML/CSS/JS.
За целите на тази статия няма да използвам префикси на браузъра, за да объркам кода, но в реална употреба не забравяйте да добавите поддръжка на префикси за Firefox, Safari и Chrome.
Нека веднага да отбележа още две важни подробности.
Първо, в повечето случаи използването на многоколонно оформление за текст може да се разглежда като развитие на показването на съдържанието на сайта по пътя на прогресивното подобряване, в рамките на който потребителите на по-модерни сайтове ще получат повече екстри:
На второ място, многоколонният дисплей пасва добре на възможностите на Media Queries (и идеи за адаптивен дизайн), например при различни размери на екрана можете да форматирате текст в различен брой колони:
И последното нещо, което бих искал да отбележа във въведението, за да не се спирам на това по-нататък и да преминем с чиста съвест към техническите подробности: когато използвате текстово оформление с много колони, трябва да запомните, че такова подреждане също предполага определен ред на четене (за европейски езициот ляво на дясно). Ето защо е важно, за да преместите погледа от една колона в друга, е необходимо да извършите възможно най-малко допълнителни действия, особено когато става въпрос за вертикални превъртания:
В този смисъл хоризонталният характер на колоните е по-добре комбиниран с хоризонтално превъртане (както се използва в много приложения на Win8 - например, това е ясно видимо в приложението USA Today):
Като цяло високоговорителите са страхотни, но не забравяйте за потребителското изживяване. А сега в битка!
Колони
И така, имаме текст (съдържание), който искаме да разположим в няколко колони. Откъде да започна?
За да превърнете такъв елемент в многоколонен, трябва да зададете едно от свойствата чрез CSS стилове: ширина на колонатаили колона-бройкъм значение, различно от Автоматичен. Например,
За да разделите текста на две колони, просто направете следното:
Статия (брой колони: 2;)
Браузърът ще свърши останалото: 
Алтернативен имот - ширина на колоната— ви позволява да зададете оптималната ширина на колоната:
Статия (ширина на колоната: 150px;)
В този случай самият браузър разделя съдържанието на необходимия брой колони, за да запълни външния контейнер, като се адаптира към зададената ширина на колоната. Важният момент е, че действителната ширина може да се различава от посоченатанагоре или надолу: на снимката по-горе сивата лента е широка точно 150px - и, както можете да видите, тя е по-малка от действителната ширина на колоната.
Това поведение се определя от спецификацията и позволява (автоматично) по-голяма гъвкавост при разработване на адаптивно маркиране:
Например, ако имате контейнер с ширина 100px и зададете колоните да бъдат широки 45px, тогава браузърът ще приеме, че само две колони ще се поберат, и за да запълни цялото пространство, той ще увеличи размера на всяка 50px. (Това също взема предвид разстоянието между колоните, което ще бъде обсъдено в следващия раздел.)
В известен смисъл това може да се разглежда като алтернатива на използването на Media Queries за указване на различен брой колони в зависимост от размера на прозореца и автоматично изчисляване на ширините на колоните:
@media (min-width:400px) (статия (брой колони: 2; ) ) @media (min-width:600px) (статия (брой колони: 3; )) ...
За втори път говоря за алтернатива - и ето защо.
брои срещу ширина
Както вече трябва да е ясно от описанието по-горе, спецификацията предоставя два начина за задаване на броя и ширината на колоните (между другото, тя е еднаква за всички колони!):- колона-бройви позволява да посочите броя на колоните, на които искате да разделите съдържанието, докато ширината на колоните се определя от браузъра, като се вземе предвид наличното пространство.
- ширина на колонатаидва от обратната страна: показва какви приблизително трябва да бъдат колоните, но оставя изчисляването на техния брой на преценката на браузъра.
Колони: 12em; /* ширина на колона: 12em; брой колони: авто; */ колони: 2; /* ширина на колона: авто; брой колони: 2; */ колони: авто; /* ширина на колона: авто; брой колони: авто; */ колони: auto 12em; /* ширина на колона: 12em; брой колони: авто; */ колони: 2 авто; /* ширина на колона: авто; брой колони: 2; */
Какво се случва, ако посочите както броя на колоните, така и оптималната ширина? Според спецификацията, в този случай колона-бройопределя максимална сумаколони:
Статия ( колони: 150px 3; /* ширина на колона: 150px; брой колони: 3; */ )
Всъщност, следвайки развитието на уеб стандартите, включително някои от моите статии за CSS3 (вижте например), се надявам, че сте не по-малко вдъхновени от възможностите, които се отварят за уеб разработчиците. Адаптивните, гъвкави и мощни инструменти за управление на разположението на съдържание стават все по-близки и по-достъпни. И решаването на сложни проблеми става все по-лесно.
Интерактивен
Можете да си поиграете как работи CSS3 Multi-column на ietestdrive.com:
Опитайте, експериментирайте. Докладвайте грешки на разработчиците на браузъра. И не забравяйте да помислите какво ще видят потребителите на по-стари (и привидно модерни, но все още не напълно съвместими със стандартите) браузъри – например можете да използвате плъгин за jQuery Columnizer. Не забравяйте адаптивността и зрителите на малки и големи екрани.
В този урок ще говорим за използването на CSS3 свойства за изграждане на шаблон с няколко колони. Тъй като това е CSS3, използването на неговите свойства изисква предварително внимателно тестване.
Използване на множество колони
За да създадете няколко колони, можете да използвате свойствата:
- колона-брой
- ширина на колоната
Първият задава точния брой колони за извеждане, а последният задава ширината на всяка колона. Всички други параметри на колоната ще се определят от наличната ширина.
Използваме HTML маркиране:
CSS кодът ще бъде така:
Div (брой колони: 3)
или така:
Div (ширина на колона: 15em) /* Можете също да използвате px */
Наличен е и кратък запис:
Div (колони: 3 20em)
В кратък запис можете да зададете както броя на колоните, така и тяхната ширина. На практика обаче по правило се изисква само едно нещо.
Дефинирането на колони чрез свойството column-count е по-подходящо за флуидни шаблони, тъй като ширината на колоните ще се адаптира с промяната на ширината на екрана на браузъра.
Колонни контейнери
Използването на свойствата column-count или column-width създава нов контейнер между външния елемент и съдържанието. Нарича се контейнер за колони, въпреки че не можете да променяте свойствата му.
Колоните са подравнени в един ред. Всички контейнери на колони в един ред ще имат еднаква височина, въпреки че съдържанието им може да се различава значително.
Ако накарате елемент да плава в контейнер на колона, той ще бъде ограничен до контейнера на колоната, а не до външния контейнер. Задаването на ширината на елемента на колоната в % също ще работи - ширината ще се изчислява от ширината на контейнера на колоната, а не на външния контейнер.
Разстояние и разделители на колони
Има малък контрол върху високоговорителите. Можем да зададем разстоянието между колоните, като използваме свойството column-gap. По подразбиране свойството column-gap е зададено на 1em.
Div (разстояние между колони: 2 em)
Можете също да зададете вертикалния разделител, като използвате свойството column-rule:
Div (правило на колона: тънко плътно #ccc)
Кратък запис може да бъде представен от 3 свойства, които действат по същия начин, както при дефинирането на рамките на елементите:
- ширина-правило-колона
- колона-правило-стил
- цвят-правило-колона
Разстоянието е равно на височина на колонния контейнер, а сепараторът е поставен в центъра на разстоянието. Разстоянието и разделителят имат еднаква височина. Ако дадена колона няма съдържание, разделителят между нея и съседните колони няма да се показва.
Подложка и обхват на колоната
Вероятно няма да използвате свойството column-fill много често, за да укажете как да се попълват колоните. Това е начин да кажете на браузърите колко съдържание да поставят във всяка колона.
Можете да използвате автоматично (по подразбиране) или баланс, което ще принуди браузъра да се опита да запълни колоните равномерно. На практика няма голяма разлика между резултатите от използването на тези стойности.
Обхватът, зададен чрез свойството column-span, е много по-полезна настройка. Той позволява на HTML елемент да обхваща множество колони. На снимката по-горе заглавката използва точно това свойство.
H2 (обхват на колони: всички)
Има само две възможни стойности - all (всички) или none (нищо). Няма да можете да използвате 2 от 3-те колони.
Прекъсване на високоговорителя
Има три подобни свойства, които могат да се използват за прекъсване на съдържание в колона около елемент.
- Към елемента - почивка-преди:
- В елемент - взлом:авто | винаги | избягвайте | наляво | надясно | страница | колона | избягвайте страница | избягвайте-колона
- След стихията - почивка след:авто | избягвайте | избягвайте страница | избягвайте-колона
Дефиниции на използваните стойности:
- Автоматичен— Генерирането или забраната на прекъсвания на страници/колони са деактивирани.
- винаги
- да се избегне— Деактивирайте прекъсванията на страници/колони.
- наляво- Генерирайте един или два прекъсвания на страници, така че следващата страница да бъде форматирана като страницата отляво.
- точно- Генерирайте един или два прекъсвания на страници, така че следващата страница да е форматирана като страниците вдясно
- страница- Винаги генерирайте прекъсване на страницата.
- колона- Винаги генерирайте прекъсване на колона.
- избягвайте страница— Деактивирайте прекъсванията на страници.
- избягвайте-колона— Забранете прекъсванията на колони.
Целта на всички тези свойства и стойности е да се гарантира, че определено съдържание започва в нова колона.
Ако изображение или непрекъсната дума надвишава ширината на колоната, тя ще бъде отрязана в средата на пространството, където е поставен разделителят.
Възможно е да ограничите колоните, така че елементът да има повече колони, отколкото има място за изход:
- Ограничаването на височината на колоната може да доведе до допълнителни колони, вместо да осигури достатъчно място за изход.
- Ограничаването на размера на страницата може да доведе до преместване на допълнителни колони на следващата страница.
- Задаването на разделяне на колона може да доведе до появата на допълнителна колона извън наличното изходно пространство или на следващата страница.
Заключение
Свойствата на CSS3 за създаване на шаблон с няколко колони могат да бъдат чудесен инструмент. Но използването им изисква внимателна проверка на поддръжката в различни браузъри.
С тяхна помощ можете да промените външен видсъществуващ проект без големи промени в конструкцията.
The CSS модул за оформление с няколко колониразширява на блоков режим на оформлениеза да позволи лесното дефиниране на множество колони от текст.Хората имат проблеми с четенето на текст, ако редовете са твърде дълги; ако отнеме твърде много време на очите да се преместят от края на единия ред до началото на следващия, те губят представа на кой ред са били. Следователно, за да се възползват максимално от големия екран, авторите трябва да имат колони с текст с ограничена ширина, поставени една до друга, точно както правят вестниците.
За съжаление това е невъзможно да се направи с CSS и HTML без принудително прекъсване на колони на фиксирани позиции или строго ограничаване на разрешеното маркиране в текста или използване на героичен скрипт. Това ограничение се разрешава чрез добавяне на нови CSS свойства за разширяване на традиционния режим на блоково оформление.
Използване на колони
Брой и ширина на колоните
Две CSS свойства контролират дали и колко колони ще се появят: column-count и column-width.
Свойството column-count задава броя на колоните на определено число. напр.
Пример 1
HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS
#col (брой колони: 2;)Резултат
Ще покаже съдържанието в две колони (ако използвате браузър, съвместим с няколко колони):
Свойството column-width задава минималната желана ширина на колоната. Ако броят на колоните също не е зададен, тогава браузърът автоматично ще направи толкова колони, колкото се побират в наличната ширина.
Пример 2
HTML
CSS
#wid (колона-ширина: 100px;)Резултат
В блок с няколко колони съдържанието автоматично се прехвърля от една колона в следващата, ако е необходимо. Цялата HTML, CSS и DOM функционалност се поддържа в рамките на колони, както и редактиране и печат.
Стенография на колоните
През повечето време уеб дизайнерът ще използва едно от двете свойства на CSS: column-count или column-width. Тъй като стойностите за тези свойства не се припокриват, често е удобно да се използват колоните със стенограма. напр.
CSS декларацията column-width: 12em може да бъде заменена с columns: 12em.
Пример 3
HTML
CSS
#col_short ( колони: 12em; )CSS декларацията column-count: 4 може да бъде заменена с columns: 4 .
Пример 4
HTML
CSS
#columns_4 ( колони: 4; )Резултат
Двете CSS декларации column-width: 8em и column-count: 12 могат да бъдат заменени с columns: 12 8em.
Пример 5
HTML
CSS
#columns_12 ( колони: 12 8em; )Резултат
Балансиране на височината
Спецификацията на CSS3 Column изисква височините на колоните да бъдат балансирани: това означава, че браузърът автоматично задава максималната височина на колоните, така че височините на съдържанието във всяка колона да са приблизително еднакви. Firefox прави това.
В някои ситуации обаче е полезно да зададете изрично максималната височина на колоните и след това да оформите съдържанието, започвайки от първиятколона и създаване на толкова колони, колкото е необходимо, евентуално преливащи надясно. Следователно, ако височината е ограничена, чрез задаване на свойствата CSS height или max-height на блок с много колони, всяка колона може да расте до тази височина и не повече, преди да добави нова колона. Този режим също е много по-ефективен за оформление.
Пропуски в колони
Има празнина между колоните. Препоръчителната стойност по подразбиране е 1em. Този размер може да бъде променен чрез прилагане на свойството column-gap към блока с няколко колони:
Пример 6
HTML
CSS
#column_gap (брой колони: 5; празнина колона: 2em;)Резултат
Грациозна деградация
Свойствата на колоните просто ще бъдат игнорирани от браузъри, които не поддържат колони. Следователно е сравнително лесно да се създаде оформление, което ще се показва в една колона в тези браузъри и да се използват множество колони в поддържащите браузъри.
Заключение
CSS3 колоните са примитивно оформление, което ще помогне на уеб разработчиците да направят най-добротоизползване на екранни недвижими имоти. Разработчиците с въображение могат да намерят много приложения за тях, особено с функцията за автоматично балансиране на височината.
