CSS многостолбцы

CSS многостраничное выравнивание

CSS многостраничное выравнивание позволяет легко определить многостраничный текст - как газета:

Romance of the Three Kingdoms

Первая глава
Утверждение тройного союза в Гуодянь
Секция 2: Убийство героя Хуанjin и установление успеха

Говорят, что общие тенденции в мире, разделенные в долгосрочной перспективе, должны объединяться, а объединенные в долгосрочной перспективе должны разъединяться: в конце эпохи Чжоу семь государств вели борьбу, а затем объединились с Цинь; после того как Цинь был уничтожен, Чжуган и Хань вели борьбу, а затем объединились с Хань; империя Хань с момента восстания императора Гаоцзюня, объединения всего мира, впоследствии император Гаозун возродил империю, передал империю императору Сяньди, и в конце концов разделена на три государства. Причина его хаоса, вероятно, началась с императоров Хуан и Ling. Император Хуан запретил добрых людей, верил в чжунцзянь. Когда император Хуан умер, император Ling взошел на престол, генерал Суо Ву, цзефу Чэнь Фан, совместно помогали ему; в то время чжунцзянь 曹节 и другие злоупотребляли властью, Суо Ву и Чэнь Фан планировали их истребить, но информация не была надежной, и они сами пострадали, цзунцзянь стал еще более наглым. В апреле второго года правления Динни, император посетил Дэндэ дянь. Только что сел на стул, как внезапно в углу зала поднялся сильный ветер, и只见 огромная голубая змея полетела с балки вниз, свернулась на стуле. Император был шокирован и упал, его окружающие срочно привели его в палату, все чиновники бежали в страхе. Через некоторое время змея исчезла. внезапно раздался гром и сильный дождь, а также град, которые продолжались до半夜, разрушив множество домов. В феврале четвертого года правления Динни землетрясение произошло в Лояне; также уровень моря поднялся, и все жители побережья были унесены волнами в море. В году Гуанхэ元年, самка курицы превратилась в петуха. В первый день шестого месяца, тьма в десять цуней полетела в Дэндэ дянь. В июле, радуга появилась в Ютан, все берега Вуяня рухнули. Вновь и вновь плохие знаки, не только одно. Император издал указ, чтобы члены совета объяснили причину катастрофы, цзиянь Цай Юн подал奏章, считая, что это произошло из-за вмешательства жены и дочери в политику, его слова были слишком резкими. Император, читая奏章, вздохнул и решил изменить одежду. Цзинь Цзе, который следил за ним сзади, объявил это всем вокруг; в итоге Цай Юн был обвинен в других преступлениях и отправлен в деревню. Позже Цзан Лян, Чжao Zhong, Фэн Му, Дуан 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
column-count 71.0 50.0 10.0 52.0 9.0
column-gap 71.0 50.0 10.0 52.0 9.0
column-rule 71.0 50.0 10.0 52.0 9.0
column-rule-color 71.0 50.0 10.0 52.0 9.0
column-rule-style 71.0 50.0 10.0 52.0 9.0
column-rule-width 71.0 50.0 10.0 52.0 9.0
column-span 71.0 50.0 Opera 52.0 9.0
column-width 71.0 50.0 10.0 52.0 9.0

37.0

column-count CSS создание многостолбцового форматирования

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

Пример

div {
  В следующем примере текст в элементе <div> делится на 3 столбца:
}

Попробуйте сами

column-count: 3;

column-gap CSS устанавливает промежуток между столбцами

Свойство устанавливает промежуток между столбцами.

Пример

div {
  В следующем примере указано, что промежуток между столбцами составляет 40 пикселей:
}

Попробуйте сами

column-gap: 40px;

column-rule-style CSS правила для столбцов

Пример

div {
  Свойство устанавливает стиль правил между столбцами:
}

Попробуйте сами

column-rule-width column-rule-style: solid;

Пример

div {
  Свойство устанавливает ширину правил между столбцами:
}

Попробуйте сами

column-rule-color column-rule-width: 1px;

Пример

div {
  Свойство устанавливает цвет правил между столбцами:
}

Попробуйте сами

Свойство 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