Модулът CSS Multi-column Layout е мощен инструмент, който ви позволява лесно да създавате многоколонни оформления за вашите уеб страници. Възходът на адаптивния дизайн означава, че е важно да разберете как да използвате този модул.

Можете да използвате свойствата на колоните, за да създавате гъвкави и динамични оформления, които се адаптират към различни размери на екрана.

Задаване на номер на колона, ширина и празнина

За да създадете подходящо оформление с няколко колони за съдържанието на вашата страница, трябва да започнете, като решите колко колони искате да обхваща. Едно от най-важните свойства в модула Multi-column е колона-брой свойство, което използвате, за да зададете броя на колоните, на които да разделите съдържанието.

Например:

.контейнер {
колона-брой: 3;
}

Можете също така да посочите ширината и празнината на колоните. Можете да зададете стойността на ширината на колоната, като използвате някоя от поддържаните CSS единици като px, ем, или %.

Ако ширина на колоната е настроен на Автоматичен

instagram viewer
, браузърът ще изчисли ширината на всяка колона въз основа на колона-брой свойство и наличното пространство във вашето оформление.

Например, този CSS декларира 3 колони, всяка с ширина от 200 пиксела:

.контейнер {
колона-брой: 3;
ширина на колоната: 200px;
}

The колона-пролука свойството указва празнината или разстоянието между колоните в оформление с няколко колони. Той ще зададе размера на празните пространства между съседни колони и може да приеме стойност за дължина в пиксели, ems или други поддържани единици.

Например:

.контейнер {
колона-брой: 3;
колона-пролука: 20px; /* задава разстоянието между колоните на 20 пиксела */
}

По подразбиране стойността на колона-пролука е настроен на нормално. Вашият браузър избира тази стойност, за да постигне последователно разстояние между колоните във вашето оформление, като същевременно остава визуално приятно. Тази стойност също може да варира между браузърите и може също да зависи от размера на шрифта, височината на реда, позиция собствености други свойства на оформлението на съдържанието на колоните.

Уверете се, че колоните са балансирани

CSS колоните се опитват да запълнят цялото налично пространство в оформлението. Това понякога може да доведе до колони, които имат значително различна височина, което прави оформлението да изглежда неравномерно.

За да балансирате колоните, трябва да се уверите, че всяка колона във вашето оформление има приблизително еднакво количество съдържание.

Можете да постигнете това чрез настройка на CSS запълване на колони собственост към баланс. След това браузърът ще се опита да разпредели съдържанието равномерно във всички колони, така че те да са с приблизително еднаква височина.

The запълване на колони свойството е зададено на баланс по подразбиране, но стойност от Автоматичен ще промени това поведение. Използването на автоматично разпределя съдържанието между колони въз основа на наличното пространство. Това може да доведе до неравномерно разстояние между колоните и неравномерни височини на колоните. Може дори да създаде оформление с празни колони.

Ето пример за това как да използвате запълване на колони свойство за балансиране на колони в оформление с няколко колони:

.multi-column-layout {
колона-брой: 3;
колона-пролука: 20px;
запълване на колони: баланс;
}

В този пример имаме многоколонно оформление с три колони и празнина от 20 пиксела между всяка колона. Чрез задаване на запълване на колони собственост към баланс, гарантираме, че съдържанието се разпределя равномерно в колоните, което води до балансирани височини на колоните.

Важно е да се отбележи, че запълване на колони свойството може да не работи добре за всички оформления и може да доведе до неравномерно разстояние между колоните. В такива случаи може да се наложи да използвате JavaScript, за да балансирате ръчно колоните. Не забравяйте да следвате най-добрите практики и използвайте прогресивно подобрение така че да не разчитате на JavaScript.

Сглобяване на всичко

Можете да обедините всичко, което сте научили за внедряването на оформление с CSS колони и да го използвате, за да създадете оформление в стил списание.

Първо създайте основната HTML структура. Използвайте контейнерен елемент, за да обвиете съдържанието си, след което създайте няколко дъщерни елемента, които след това можете да оформите в колони.

html>
<html>
<глава>
<връзкаотн="стилов лист"href="CSScolumns.css" />
глава>
<тяло>
Елемент контейнер
<дивклас="оформление на списание">

Дъщерни елементи
<дивклас="статия">
<h2>Заглавие на статиятаh2>

<стр>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Сед вътре
magna vel lorem pharetra bibendum.стр>
див>

<дивклас="статия">
<h2>Заглавие на статиятаh2>

<стр>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Сед вътре
magna vel lorem pharetra bibendum.стр>
див>

<дивклас="статия">
<h2>Заглавие на статиятаh2>

<стр>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Сед вътре
magna vel lorem pharetra bibendum.стр>
див>

див>
тяло>
html>

За да създадете оформление в стил списание с помощта на модула CSS Multi-column, комбинирайте колона-брой, ширина на колоната, колона-пролука, и запълване на колони Имоти:

.оформление на списание {
колона-брой: 3;
ширина на колоната: 300px;
колона-пролука: 20px;
запълване на колони: баланс;
}

.статия {
Цвят на фона: #f8f8f8;
граница-радиус: 4px;
кутия-сянка: 0 2px 4pxrgba(0, 0, 0, 0.1);
подплата: 10px;
влизане с взлом: избягвайте-колона;
}

Този пример също така определя влизане с взлом имот на .статия клас, със стойност от избягвайте-колона. Свойството гарантира, че всяка статия остава в една колона, вместо да се разделя на няколко колони. Ето как трябва да изглежда оформлението:

Използване на резервни варианти за неподдържани браузъри

Важно е да се отбележи, че колона-брой свойството не се поддържа във всички браузъри. Браузъри, които не поддържат колона-брой, вместо това ще покаже съдържанието в една колона.

За да предоставите резервни стилове за неподдържани браузъри, можете да използвате заявки за функции като @поддържа за откриване на поддръжка за колона-брой свойство и предоставя алтернативни стилове, когато свойството не се поддържа.

Например:

.контейнер {
/* Резервен вариант за браузъри, които не поддържат преброяване на колони */
ширина: 100%;
}

/* Откриване на поддръжка за брой колони */
@поддържа (брой колони:3) {
.контейнер {
колона-брой: 3;
}
}

В този пример използваме @поддържа заявка за функция за откриване на поддръжка за колона-брой Имот. Ако браузърът поддържа преброяване на колони, контейнер елемент ще се покаже в три колони. Ако браузърът не поддържа column-count, той ще покаже съдържанието в една колона с помощта на ширина Имот.

Разбиване на съдържанието в колони

Като цяло CSS колоните предоставят практичен и мощен начин за създаване на гъвкави и отзивчиви оформления с много колони, които подобряват използваемостта и потребителското изживяване на уеб съдържание.

Като използвате CSS колони и JavaScript заедно, можете да създадете още по-сложни и динамични оформления, които се адаптират към различни потребителски предпочитания и размери на устройства, правейки вашето уеб съдържание по-достъпно и ангажиращо за вашите потребители.