Home-theater-designers
Модулът CSS Multi-column Layout е мощен инструмент, който ви позволява лесно да създавате многоколонни оформления за вашите уеб страници. Възходът на адаптивния дизайн означава, че е важно да разберете как да използвате този модул.
Можете да използвате свойствата на колоните, за да създавате гъвкави и динамични оформления, които се адаптират към различни размери на екрана.
MAKEUSEOF ВИДЕО НА ДЕНЯ ПРЕВЪРТЕТЕ, ЗА ДА ПРОДЪЛЖИТЕ СЪС СЪДЪРЖАНИЕТО
Задаване на номер на колона, ширина и празнина
За да създадете подходящо оформление с няколко колони за съдържанието на вашата страница, трябва да започнете, като решите колко колони искате да обхваща. Едно от най-важните свойства в модула Multi-column е колона-брой свойство, което използвате, за да зададете броя на колоните, на които да разделите съдържанието.
Например:
.container {
column-count: 3;
}
Можете също така да посочите ширината и празнината на колоните. Можете да зададете стойността на ширината на колоната, като използвате някоя от поддържаните CSS единици като px , в , или % .
Ако ширина на колоната е настроен на Автоматичен , браузърът ще изчисли ширината на всяка колона въз основа на колона-брой свойство и наличното пространство във вашето оформление.
Например, този CSS декларира 3 колони, всяка с ширина от 200 пиксела:
.container {
column-count: 3;
column-width: 200px;
}
The колона-пролука свойството указва празнината или разстоянието между колоните в оформление с няколко колони. Той ще зададе размера на празните пространства между съседни колони и може да приеме стойност за дължина в пиксели, ems или други поддържани единици.
Например:
.container {
column-count: 3;
column-gap: 20px; /* sets the gap between columns to 20 pixels */
}
По подразбиране стойността на колона-пролука е настроен на нормално. Вашият браузър избира тази стойност, за да постигне последователно разстояние между колоните във вашето оформление, като същевременно остава визуално приятно. Тази стойност също може да варира между браузърите и може също да зависи от размера на шрифта, височината на реда, позиция собственост и други свойства на оформлението на съдържанието на колоните.
споделяне на файлове между mac и pc
Уверете се, че колоните са балансирани
CSS колоните се опитват да запълнят цялото налично пространство в оформлението. Това понякога може да доведе до колони, които имат значително различна височина, което прави оформлението да изглежда неравномерно.
За да балансирате колоните, трябва да се уверите, че всяка колона във вашето оформление има приблизително еднакво количество съдържание.
Можете да постигнете това чрез настройка на CSS запълване на колони собственост към баланс . След това браузърът ще се опита да разпредели съдържанието равномерно във всички колони, така че те да са с приблизително еднаква височина.
The запълване на колони свойството е зададено на баланс по подразбиране, но стойност от Автоматичен ще промени това поведение. Използването на автоматично разпределя съдържанието между колони въз основа на наличното пространство. Това може да доведе до неравномерно разстояние между колоните и неравномерни височини на колоните. Може дори да създаде оформление с празни колони.
Ето пример за това как да използвате запълване на колони свойство за балансиране на колони в оформление с няколко колони:
.multi-column-layout {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
В този пример имаме многоколонно оформление с три колони и празнина от 20 пиксела между всяка колона. Чрез задаване на запълване на колони собственост към баланс , гарантираме, че съдържанието се разпределя равномерно в колоните, което води до балансирани височини на колоните.
Важно е да се отбележи, че запълване на колони свойството може да не работи добре за всички оформления и може да доведе до неравномерно разстояние между колоните. В такива случаи може да се наложи да използвате JavaScript, за да балансирате ръчно колоните. Не забравяйте да следвате най-добрите практики и използвайте прогресивно подобрение така че да не разчитате на JavaScript.
Сглобяване на всичко
Можете да обедините всичко, което сте научили за внедряването на оформление с CSS колони и да го използвате, за да създадете оформление в стил списание.
Първо създайте основната HTML структура. Използвайте контейнерен елемент, за да обвиете съдържанието си, след което създайте няколко дъщерни елемента, които след това можете да оформите в колони.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSScolumns.css" />
</head>
<body>
<!-- Container Element -->
<div class="magazine-layout">
<!-- Child Elements -->
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
</div>
</body>
</html>
За да създадете оформление в стил списание с помощта на модула CSS Multi-column, комбинирайте колона-брой , ширина на колоната , колона-пролука , и запълване на колони Имоти:
.magazine-layout {
column-count: 3;
column-width: 300px;
column-gap: 20px;
column-fill: balance;
}
.article {
background-color: #f8f8f8;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
break-inside: avoid-column;
}
Този пример също така определя влизане с взлом имот на .статия клас, със стойност от избягвайте-колона . Свойството гарантира, че всяка статия остава в една колона, вместо да се разделя на няколко колони. Ето как трябва да изглежда оформлението:
Използване на резервни варианти за неподдържани браузъри
Важно е да се отбележи, че колона-брой свойството не се поддържа във всички браузъри. Браузъри, които не поддържат колона-брой , вместо това ще покаже съдържанието в една колона.
За да предоставите резервни стилове за неподдържани браузъри, можете да използвате заявки за функции като @поддържа за откриване на поддръжка за колона-брой свойство и предоставя алтернативни стилове, когато свойството не се поддържа.
Например:
.container {
/* Fallback for browsers that do not support column-count */
width: 100%;
}
/* Detect support for column-count */
@supports (column-count: 3) {
.container {
column-count: 3;
}
}
В този пример използваме @поддържа заявка за функция за откриване на поддръжка за колона-брой Имот. Ако браузърът поддържа преброяване на колони, контейнер елемент ще се покаже в три колони. Ако браузърът не поддържа column-count, той ще покаже съдържанието в една колона с помощта на ширина Имот.
Разбиване на съдържанието в колони
Като цяло CSS колоните предоставят практичен и мощен начин за създаване на гъвкави и отзивчиви оформления с много колони, които подобряват използваемостта и потребителското изживяване на уеб съдържание.
Като използвате CSS колони и JavaScript заедно, можете да създадете още по-усъвършенствани и динамични оформления, които се адаптират към различни потребителски предпочитания и размери на устройства, правейки вашето уеб съдържание по-достъпно и ангажиращо за вашите потребители.