CSS многостолбчатый
- Предыдущая страница CSS pagination
- Следующая страница CSS интерфейс пользователя
Многошпацировая разметка CSS
Многошпацировая разметка CSS позволяет легко определить многошпацировый текст - как в газете:
Сказание о трёх царствах
Первая глава
Угощение героев в саду Пинъюань и три союза
Разрезание головы героя жёлтого платка и первый успех
Говорят, что великие дела мира, разделенные долгое время, обязательно объединятся, а объединенные долгое время, обязательно разойдутся: в конце эпохи Zhou, семь государств вели борьбу, и все они были объединены с Цинь; после того, как Цинь был разгромлен, Чжоу и Хань вели борьбу, и затем они были объединены с Хань; династия Хань с основанием Императором Гао Цзюнь, который斩杀了 белую змею и восстал, объединила мир, а затем империя была возрождена императором Гуан У, и затем она была разделена на три царства. Причина его хаоса, возможно, началась с императоров Хуан и Ling. Император Хуан запретил добрых людей, и он верил в придворных евнухов. Когда император Хуан умер, император Ling занял трон, генерал Суо Ву и тайный канцлер Чэнь Фан совместно помогали ему; в то время евнуки, такие как Цао Жи, манипулировали властью, Суо Ву и Чэнь Фан планировали их уничтожить, но их планы не были тайными, и они сами были убиты, и евнуки стали еще более беззаконными. В апреле второго года правления Императора Jian Ning, император присутствовал в Зале Вэньдэ. Он только что сел на трон, как в углу зала внезапно поднялся ураган, и只见 огромная синяя змея полетела с балки и свилась на стуле. Император был в ужасе и упал, его окружающие быстро помогли ему вернуться в дворец, все чиновники бежали в страхе. Через некоторое время змея исчезла. внезапно раздался гром и пошел сильный дождь, и также пошел град, который продолжался до半夜, разрушив множество домов. В феврале четвертого года правления Императора Jian Ning, землетрясение произошло в Лоян; также море Overflowed, и все жители побережья были унесены волнами в море. В первом году правления Императора Guang Hua,雌 chicken превратилась в петуха. В первом месяце шестого месяца, тьма в длину более tens丈, полетела в Зал Вэньдэ. В июле, радуга появилась в Гунтан, все берега Усианская горы разрушились. Все это неспокойные знаки, не только один. Император издал указ, чтобы чиновники обсудили причину этих знамений, канцлер Цай Юн подал奏章, считая, что падение радуги и превращение петуха в петуха были вызваны вмешательством женщин и евнухов в политику, и его слова были резкими и прямолинейными. Император, прочитав это, вздохнул и решил изменить одежду. Цао Жи, который следил за ним сзади, объявил это всем вокруг;sequently, Цай Юн был обвинен в преступлении и отправлен в деревню. Позже Цзан Лян, Чжao Zhong, Фэн Цю, Дuan Gui, Цао Жи, Хоу Лян, Сай Шuo, Чэнь Kuang, Xia Yun, Guo Sheng десять человек объединились, чтобы стать злом, известным как "десять постоянных евнухов". Император уважал Цао Жан, называя его "отцом". Политика в правительстве стала все хуже, и это привело к тому, что люди по всему миру начали думать о хаосе, и разбойники начали появляться как мухи.
...... ......
Свойства многоугольного формата CSS
В этой главе вы узнаете о следующих многоугольных свойствах:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
Поддержка браузеров
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот свойство.
Свойство | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
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 колонки:
Пример
div { column-count: 3; }
Установка интервала между колонками CSS
column-gap
Свойство определяет интервал между колонками:
В следующем примере указана間隔 между колонками 40 пикселей:
Пример
div { column-gap: 40px; }
Правила колонок CSS
column-rule-style
Свойство определяет стиль правил между колонками:
Пример
div { column-rule-style: solid; }
column-rule-width
Свойство определяет ширину правил между колонками:
Пример
div { column-rule-width: 1px; }
column-rule-color
Свойство определяет цвет правил между колонками:
Пример
div { column-rule-color: lightblue; }
Свойство column-rule является краткой формой для установления всех свойств column-rule-*.
В следующем примере установлены ширина, стиль и цвет правил между колонками:
Пример
div { column-rule: 1px solid lightblue; }
Установка количества колонок, которое элемент должен охватывать
column-span
Свойство определяет, сколько колонок элемент должен охватывать.
В следующем примере элемент <h2> должен охватывать все колонки:
Пример
h2 { column-span: all; }
Установка ширины колонки
column-width
Свойство устанавливает рекомендованную максимальную ширину колонки.
В следующем примере рекомендуется максимальная ширина колонки равна 100px:
Пример
div { column-width: 100px; }
Свойства многоугольного формата 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 | Краткое свойство для установки column-width и column-count |
- Предыдущая страница CSS pagination
- Следующая страница CSS интерфейс пользователя