Разпределение на множество колони (списание, сходно) С CSS3
Като цяло, хората ще загубят следите, когато четат изключително дълго съдържание. Ето защо, в печатните медии като списания и вестници, съдържанието е разделено на няколко колони за лесно четене.
Създаването на колона в интернет е съвсем различна история. Това е доста трудно. Всъщност, не много отдавна може да се наложи да разделяте съдържанието ръчно на някои Разделениеs и я плъзнете надясно или наляво, след това задайте ширината, подложката, границата, границите и т.н..
Но сега нещата са много опростени CSS3 Мултиколонен модул. Както ясно подсказва името, този модул ни позволява да разделим съдържанието в колонираното оформление, което виждаме във вестниците или списанията.
Поддръжка на браузър
Понастоящем във всички браузъри се поддържат няколко колони - Firefox 2+, Chrome 4+, Safari 3.1+ и Opera 11.1 - с изключение, както е предвидено, Internet Explorer, но следващата версия, IE10, изглежда е започнала да предоставя поддръжка за този модул.
За останалите браузъри, за да работи, Firefox все още се нуждае от -Моз- префикс, докато Chrome и Safari се нуждаят от -WebKit- префикс. Opera не изисква никакви префикси, така че можем да използваме официалните свойства.
Източник: Кога мога да използвам CSS3 Multiple колона оформление?
Създайте няколко колони
Преди да създадем колоните, подготвихме някои текстови параграфи за демонстрацията, опаковани в HTML5 етикет, както следва;
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. Ограничаване на болестта. Quisque commodo ornare mi, седнете аме аликето justo bibendum non. Integer bibendum convallis сапиен, сед амет tincidunt orci placerat in. Integer vitae posled. //и така нататък
… И укажете ширината на 600px от стиловия лист, това е всичко.
Сега, нека започнем да създаваме колоните.
В примера по-долу ще разделим съдържанието на две колони с колона броене Имот. Това свойство ще укаже на браузъра да визуализира съдържанието в колони по посочения номер и да позволи на браузъра да определи правилната ширина за всяка колона.
артикул брой на колонките: 2; -moz-колонна брой: 2; колонна брой: 2;
Освен че се дефинират от броя, колоните могат да бъдат създадени чрез задаване на ширината с помощта на колона ширина и оставяйки браузъра да реши колко колони да се генерират на място.
В този пример указваме ширината на колоната за 150px, което доведе до разделяне на съдържанието на три колони.
статия -moz-column-width: 150px; -webkit-ширина на колоната: 150px; ширина на колоната: 150px;
Както е посочено в спецификацията. действителната ширина на колоната може да бъде по-широка или по-тясна от зададената ширина на колоната в зависимост от наличното пространство. Също така, ако стойността на ширината не е изрично посочена, “Автоматичен” ще се приема като неизпълнение, което също може да означава “няма колона”.
Gap за колони
Gap за колони определете пространствата, които разделят всяка колона. Стойността на празнината може да бъде посочена в ем или пиксела, но както е посочено в спецификацията стойността не може да бъде отрицателна. В примера по-долу ние определяме празнината за 30px, така пространствата между колоните изглеждат малко по-широки.
статия -webkit-column-gap: 30px; -moz-column-gap: 30px; пролука в колоната: 30px;
Правило за колона
Ако искате да добавите граници между колоната, можете да използвате колонна правило собственост, която работи много подобно на граница Имот. Така че, да кажем, ако искаме да поставим пунктирана граница между колоната, можем да напишем;
article -moz-column-rule: 1px с точкуван #ccc; -webkit-column-rule: 1px пунктирана #ccc; column-rule: 1px пунктирана #ccc;
Колонен обхват
Това свойство работи доста подобно на ColSpan в маса маркер. Общата реализация на това свойство е да обхване заглавието на съдържанието във всички колони. Ето един пример.
статия h1 -webkit-column-span: всички; колона от време: всички;
В горния пример ние дефинирахме h1 за да обхване всички колони и ако е зададен обхват на колоната, 1 ще се приема като стандартно. За съжаление този имот към момента на писане работи само в Opera и Chrome.
Заключителни думи
Това е всичко за сега, ние сме преминали през всички основни неща, за да създадем много колони с CSS3, и както споменахме в началото, този модул работи много добре в съвременните браузъри, но все още не работи в Internet Explorer.
В крайна сметка се надяваме, че вече имате доста добро разбиране за това как да създадете колони с CSS3 и ако имате време за експерименти, можете да споделите методите и резултатите си в полето за коментари по-долу. Благодаря ви, че прочетете този пост и се забавлявате.
- Демонстрация
- Изтеглете Източник
