CSS многостолбцы
- Предыдущая страница CSS pagination
- Следующая страница 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 |
- Предыдущая страница CSS pagination
- Следующая страница CSS пользовательский интерфейс