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 | Сокращенное свойство для установки ширины столбца и количества столбцов |
