Мултипле Цолумнс Лаиоут (Магазине-алике) са ЦСС3 / Веб дизајн

Генерално, људи ће изгубити траг када читају изузетно дугачак садржај. Зато је, у штампаним медијима као што су часописи и новине, садржај подијељен на више ступаца за лако читање.

Стварање колоне на Вебу је потпуно друга прича. То је прилично тешко. У ствари, не тако давно ћете можда морати ручно подијелити садржај на неке дивс и плутају на десно или лево, затим одредите ширину, паддинг, маргину, границе и тако даље.

Али, ствари су сада много поједностављене ЦСС3 Мулти Цолумн Модуле. Као што име јасно имплицира, овај модул нам омогућава да подијелимо садржај у распоред у колони који видимо у новинама или часописима.

Бровсер Суппорт

Вишеструки ступци су тренутно подржани у свим прегледницима - Фирефок 2+, Цхроме 4+, Сафари 3.1+ и Опера 11.1 - осим, како је предвиђено, Интернет Екплорер, али изгледа да је наредна верзија, ИЕ10, почела пружати подршку за овај модул.

За остале претраживаче, да би функционисао, Фирефок још увек треба -моз- префикс, док Цхроме и Сафари требају -вебкит- префикс. Опера не захтева никакве префиксе, тако да можемо да користимо само званична својства.

Извор: Када могу користити ЦСС3 Мултипле лаиоут колона?

Направите више колона

Пре него што креирамо колоне, припремили смо неколико текстуалних одломака за демонстрацију, умотани у ХТМЛ5

таг, као што следи;

  Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Нунц либеро магна, вененатис куис аликует ет, рутрум у аугу. Донец вел темпор долор. Донец волутпат фрингилла порта. Суспендиссе нон нулла тортор. Куискуе цоммодо орнаре ми, сит амет аликует јусто бибендум нон. Интегер бибендум цонваллис сапиен, сит амет тинцидунт орци плацерат ин. Интегер витае послед. //и тако даље

… И одредите ширину за 600пк из стила, то је то.

Почнимо са стварањем колона.

У доњем примеру, поделићемо садржај на две колоне са цоунт-цолумн својство. Ова особина ће рећи прегледачу да прикаже садржај у колоне према наведеном броју и нека претраживач одлучи о исправној ширини за сваку колону.

 чланак -вебкит-цолумн-цоунт: 2; -моз-цолумн-цоунт: 2; број колона: 2;

Осим што је дефинисан бројем, колоне се могу креирати навођењем ширине помоћу Ширина колона и остављање претраживача да одлучи колико колона треба да се генеришу на месту.

У овом примеру наведемо ширину колоне за 150пк, што је резултирало да се садржај подели у три колоне.

 чланак -моз-цолумн-видтх: 150пк; -вебкит-видтх-ширина: 150пк; ширина ступца: 150пк;

Као што је наведено у спецификацији. стварна ширина колоне може бити шира или ужа од специфициране ширине ступца у зависности од расположивог простора. Такође, ако вредност ширине није експлицитно наведена, “ауто” ће се сматрати као задани, што такође може значити “но цолумн”.

Цолумн Гап

Цолумн Гап дефинишите просторе који раздвајају сваку колону. Вредност празнине се може навести у ем или пк, али како је наведено у спецификацији вредност не може бити негативна. У доле наведеном примјеру наводимо јаз за 30пк, тако да размаци између колона изгледају мало шире.

 артицле -вебкит-цолумн-гап: 30пк; -моз-цолумн-гап: 30пк; гап-цолумн: 30пк;

Цолумн Руле

Ако желите да додате границе између колоне, можете да користите цолумн-руле имовине, која ради веома слично граница својство. Дакле, рецимо, ако желимо да ставимо тачкасту границу између колоне, можемо да напишемо;

 чланак -моз-цолумн-руле: 1пк означен #ццц; -вебкит-цолумн-руле: 1пк означено #ццц; цолумн-руле: 1пк означено #ццц;

Цолумн Спан

Ово својство функционише веома слично цолспан у сто таг. Уобичајена имплементација ове особине је да се обухвати наслов садржаја у свим колонама. Ево примера.

 чланак х1 -вебкит-цолумн-спан: све; цолумн-спан: алл;

У горњем примеру смо дефинисали х1 да обухвати све колоне, и ако је одређен распон колоне, 1 ће се сматрати подразумеваним. Нажалост, овај објекат, у време писања овог текста, ради само у Опера и Цхроме.

Финал Вордс

То је све за сада, дошли смо кроз све битне ствари за креирање вишеструких колона са ЦСС3, и као што смо споменули на почетку, овај модул добро функционише у модерним претраживачима, али још не ради у програму Интернет Екплорер.

На крају, надамо се да сада имате прилично добро разумијевање о томе како створити ступце са ЦСС3, а ако имате времена за експерименте, слободно подијелите своје методе и резултате у оквиру за коментаре испод. Хвала вам што сте прочитали овај пост и забавите се.

Демо
Довнлоад Соурце