CSS Кілька стовпців
CSS Макет із кількох стовпців
CSS Макет із кількох стовпців дозволяє легко визначити кілька стовпців тексту - як в газетах:
Daily Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
CSS Властивості кількох стовпців
В цьому розділі ви дізнаєтесь про наступні властивості кількох стовпців:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
Підтримка браузерами
Числа в таблиці вказують першу версію браузера, яка повністю підтримує властивість.
| Властивість | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSS Створити кілька стовпців
Властивість column-count визначає кількість стовпців, на які має бути розділено елемент.
В наступному прикладі текст в елементі <div> буде розділено на 3 стовпця:
CSS Визначити розрив між стовпцями
Властивість column-gap визначає розрив між стовпцями.
В наступному прикладі вказується прозір в 40 пікселів між стовпцями:
CSS Роздільник між стовпцями
Властивість column-rule-style визначає стиль роздільника між стовпцями:
Властивість column-rule-width визначає ширину роздільника між стовпцями:
Властивість column-rule-color визначає колір роздільника між стовпцями:
Властивість column-rule є скороченою властивістю для встановлення всіх властивостей вище column-rule-*.
В наступному прикладі задаються ширина, стиль та колір роздільника між стовпцями:
Визначити, скільки стовпців має охоплювати елемент
Властивість column-span визначає, скільки стовпців має охоплювати елемент.
В наступному прикладі визначається, що елемент <h2> має охоплювати всі стовпці:
Визначити ширину стовпця
Властивість column-width визначає рекомендовану оптимальну ширину для стовпців.
В наступному прикладі вказується, что рекомендована оптимальна ширина для стовпців має складати 100 пікселів:
CSS Властивості кількох стовпців
В наступній таблиці перераховані всі властивості кількох стовпців:
| Властивість | Опис |
|---|---|
| column-count | Визначає кількість стовпців, на які має бути розділений елемент |
| column-fill | Визначає, як заповнювати стовпці |
| column-gap | Визначає розрив між стовпцями |
| column-rule | Скорочена властивість для встановлення всіх властивостей column-rule-* |
| column-rule-color | Визначає колір роздільника між стовпцями |
| column-rule-style | Визначає стиль роздільника між стовпцями |
| column-rule-width | Визначає ширину роздільника між стовпцями |
| column-span | Визначає, скільки стовпців елемент має охоплювати |
| column-width | Визначає уявну оптимальну ширину для стовпців |
| columns | Скорочена властивість для встановлення ширини стовпця та кількості стовпців |
