За многу години, CSS плови се претворливи, но сепак неопходни компоненти во креирањето на веб-страниците. Ако вашиот дизајн повика на повеќе колони, се претворивте во плови . Проблемот со овој метод е тоа што, и покрај неверојатната генијалност што веб дизајнерите / програмерите ги покажаа во креирањето на сложени локации, CSS плови никогаш не биле навистина наменети да се користат на овој начин.
Додека плови и позиционирање на CSS сигурно ќе имаат место во веб-дизајнот за многу години што доаѓаат, новите техники на распоред, вклучително CSS Grid и Flexbox, сега им даваат на веб-дизајнерите нови начини за креирање на нивните распореди на сајтови. Друга нова техника на изглед која покажува многу потенцијал е CSS повеќе колони.
Колумни на CSS се околу неколку години, но недостатокот на поддршка во постарите прелистувачи (главно постари верзии на Internet Explorer) ги чува многу веб професионалци од користењето на овие стилови во нивната продукциска работа.
Со крајот на поддршката за оние постари верзии на ИЕ, некои веб-дизајнери сега експериментираат со нови опции за изгледот на CSS, вклучени се колумни на CSS и откривање дека тие имаат многу поголема контрола со овие нови пристапи отколку со плови.
Основи на CSS колумни
Како што сугерира неговото име, CSS повеќекратните колони (исто така познат како CSS3 мулти-колонски распоред) ви овозможува да ја поделите содржината во поставен број на колони. Најосновните својства на CSS што ќе ги користите се:
- колона-брои
- колона-јаз
За бројот на колоната, ќе го наведете бројот на саканите колони. Јазот на колоната ќе биде жлебови или проред помеѓу тие колони. Прелистувачот ќе ги преземе овие вредности и ќе ја подеси содржината рамномерно во бројот на колони што ги наведувате.
Вообичаен пример за CSS повеќе колони во пракса би било да се подели блок од текстуални содржини во повеќе колони, слично на она што го гледате во написот во весникот. Кажете дека го имате следниов HTML маркер (забележете дека на пример цели, јас само ставам почеток на еден став, додека во пракса, најверојатно, ќе има повеќе ставки на содржина во оваа ознака):
Насловот на вашата статија
Замислете многу ставки од текст тука ...
Ако потоа напиша сте стилови на CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; број на колона: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; колона-јаз: 30px; }Ова правило на CSS би ја поделило поделбата "содржина" во 3 еднакви колони со празнина од 30 пиксели меѓу нив. Ако сакавте две колони наместо 3, едноставно ќе ја промените таа вредност и прелистувачот ќе ги пресмета новите ширини на тие колони за да ја поделат содржината рамномерно. Забележете дека најпрво ги користиме првобитните својства на продавачот, проследено со не-префиксни декларации.
Лесно, како што е ова, неговата употреба на овој начин е дискутабилна за користење на веб-страниците. Да, можете да поделите повеќе содржини во повеќе колони, но ова можеби не е најдоброто искуство за читање за Интернет, особено ако висината на овие колони падне под "превитката" на екранот.
Читателите потоа ќе треба да дојдат нагоре и надолу за да ја прочитаат целосната содржина. Сепак, директорот на CSS Columns е толку лесно како што гледате овде, и може да се користи за да направи многу повеќе отколку само да ја подели содржината на некои параграфи - може да се користи за изгледот.
Распоред со CSS колони
Кажете дека имате веб-страница со содржина која има 3 колони содржина. Ова е многу типичен распоред на веб-страници и за да ги постигнете овие 3 колони, вие вообичаено ќе пловиш поделбите што се наоѓаат. Со CSS повеќе колони, тоа е многу полесно.
Еве еден примерок HTML:
Најнови вести
Содржината ќе оди тука ...
Од нашиот блог
Содржината ќе отиде тука ...
Претстојни настани
p>
CSS за да ги направите овие повеќе колони започнува со она што сте го виделе претходно:
.content {-moz-column-count: 3; -webkit-column-count: 3; број на колона: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; колона-јаз: 30px; }Сега предизвикот е тоа што, бидејќи прелистувачот сака рамномерно да ја подели оваа содржина, така што ако содржината на должината на овие поделби е поинаква, тој прелистувач всушност ќе ја подели содржината на поединечната поделба, додавајќи го почетокот на една колона и потоа да продолжите во друга (можете да го видите ова со користење на овој код за да го стартувате експериментот и да додадете различни должини на содржината во секоја поделба)!
Тоа не е она што го сакате. Сакате секоја од овие поделби да создаде посебна колона и, без разлика колку голема или мала содржина на поединечна поделба може да биде, никогаш не сакате тоа да се подели. Ова може да го постигнете со додавање на оваа дополнителна линија на CSS:
.content div {display: inline-block; }Ова ќе ги принуди оние поделби што се во внатрешноста на "содржината" да останат непроменети, дури и кога прелистувачот го разделува ова во повеќе колони. Уште подобро, со оглед на тоа што ние не дадеме нешто тука фиксна ширина, овие колони автоматски ќе ја менуваат големината, бидејќи прелистувачот ќе ја смени големината, што ќе ги направи идеална апликација за соодветни веб-страници . Со тој "inline-block" стил во место, секоја од вашите 3 поделби ќе биде посебен колона на содржина.
Користење ширина на колона
Постои уште еден имот покрај "колона-брои" што можете да ги користите, и во зависност од вашите потреби за изгледот, всушност, може да биде подобар избор за вашиот сајт. Ова е "Ширина на колона". Користејќи ја истата ознака за HTML како што е прикажано претходно, би можеле да го сториме тоа со нашиот CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; колона-ширина: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; колона-јаз: 30px; }. content content {display: inline-block; }Начинот на кој работи ова е дека прелистувачот ја користи оваа "колона-ширина" како максимална вредност на таа колона. Значи, ако прозорецот на прелистувачот е ширум помалку од 500 пиксели, овие 3 поделби ќе се појавуваат во една колона, една од врвовите на друга. Ова е типичен распоред кој се користи за распоред на мобилен / мал екран.
Бидејќи ширината на прелистувачот се зголемува за да биде доволно голема за да ги собере 2 колони заедно со наведените празнини на колоните, прелистувачот автоматски ќе оди од еден колона распоред до две колони. Продолжете да ја зголемувате ширината на екранот и на крајот, ќе добиете 3 колона дизајн, со секоја од нашите 3 поделби прикажани во нивната сопствена колона. Повторно, ова е одличен начин за да добиете некои одговорени, мулти-уред пријателски распоред, и дури не треба да користите медиумски пребарувања за да ги смените стиловите на изгледот!
Други колумни особини
Освен карактеристиките опфатени овде, постојат и својства за "правило колона", вклучувајќи вредности на боја, стил и ширина кои ви дозволуваат да креирате правила помеѓу вашите колони. Овие ќе се користат наместо границите ако сакате да имате некои линии кои ги одвојуваат вашите колони.
Време е да се експериментира
Во моментов, CSS распоредот на повеќе колони е многу добро поддржан. Со префикси, над 94% од веб-корисниците ќе можат да ги видат овие стилови, а таа неподдржана група навистина би била многу постара верзија на Internet Explorer, за кој можеби и нема да можете да поддржувате.
Со ова ниво на поддршка сега постои, нема причина да не започнуваме со експериментирање со CSS Columns и распоредување на овие стилови во веб-страници подготвени за производство. Можете да ги стартувате своите експерименти со користење на HTML и CSS презентирани во оваа статија и да играте со различни вредности за да видите што најдобро ќе работи за потребите на изгледот на вашиот сајт.