Учебники

CSS3 — несколько столбцов

Сентябрь 21, 2018

CSS3 поддерживает несколько столбцов, чтобы упорядочить текст как структуру газеты.

Некоторые из наиболее часто используемых свойств нескольких столбцов, как показано ниже —

Sr.No. Значение и описание
1

колонка подсчета

Используется для подсчета количества столбцов, на которые должен быть разделен элемент.

2

колонного заполнения

Используется, чтобы решить, как заполнить столбцы.

3

Колонка зазор

Используется для определения разрыва между столбцами.

4

колонного правило

Используется для указания количества правил.

5

Правило цвета

Используется для указания цвета правила столбца.

6

правила стиля

Используется для указания правила стиля для столбца.

7

Правило ширины

Используется для указания ширины.

8

Колонку-пролетный

Используется для указания промежутка между столбцами.

колонка подсчета

Используется для подсчета количества столбцов, на которые должен быть разделен элемент.

колонного заполнения

Используется, чтобы решить, как заполнить столбцы.

Колонка зазор

Используется для определения разрыва между столбцами.

колонного правило

Используется для указания количества правил.

Правило цвета

Используется для указания цвета правила столбца.

правила стиля

Используется для указания правила стиля для столбца.

Правило ширины

Используется для указания ширины.

Колонку-пролетный

Используется для указания промежутка между столбцами.

пример

Ниже приведен пример расположения текста как новой структуры бумаги.

Live Demo

<html>
   <head>
      <style>
         .multi {
            /* Column count property */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            
            /* Column gap property */
            -webkit-column-gap: 40px; 
            -moz-column-gap: 40px; 
            column-gap: 40px;
            
            /* Column style property */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      </style>
   </head>

   <body>
   
      <div class = "multi">
         Tutorials Point originated from the idea that there exists a class 
         of readers who respond better to online content and prefer to learn 
         new skills at their own pace from the comforts of their drawing rooms.
         The journey commenced with a single tutorial on HTML in 2006 and elated 
         by the response it generated, we worked our way to adding fresh tutorials
         to our repository which now proudly flaunts a wealth of tutorials and 
         allied articles on topics ranging from programming languages to web 
         designing to academics and much more.
      </div>
      
   </body>
</html>

Это даст следующий результат —

Предположим, что если пользователь хочет сделать текст новой бумагой без строки, мы можем сделать это, удалив синтаксис стиля, как показано ниже — 

.multi {
   /* Column count property */
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
   
   /* Column gap property */
   -webkit-column-gap: 40px; 
   -moz-column-gap: 40px; 
   column-gap: 40px;
}

Это даст следующий результат —

42
Share: