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