Розкладка кількох стовпців (Magazine-alike) з CSS3
Взагалі, люди втратять треки при читанні дуже довгого вмісту. Саме тому в друкованих засобах масової інформації, таких як журнали та газети, вміст поділяється на кілька стовпчиків для легкого читання.
Створення стовпця в Інтернеті - це зовсім інша історія. Це досить складно. Насправді, не так давно вам може знадобитися розділити вміст вручну divs і плаваючи вправо або вліво, потім вкажіть ширину, відступ, маржу, межі тощо.
Але тепер це значно спрощено Модуль Multi Column CSS3. Як випливає з назви, цей модуль дозволяє нам розділити вміст на колонку, яку ми бачимо в газетах або журналах.
Підтримка браузера
В даний час у всіх браузерах підтримуються декілька стовпців - Firefox 2+, Chrome 4+, Safari 3.1+ і Opera 11.1 - за винятком, як передбачено, Internet Explorer, але наступна версія, IE10, здається, почала надавати підтримку цьому модулю.
Для інших браузерів для того, щоб він працював, Firefox все ще потребує -moz- , а Chrome і Safari потрібні -webkit- префікс. Opera не вимагає жодних префіксів, тому ми можемо просто використовувати офіційні властивості.
Джерело: Коли можна використовувати розкладку стовпців CSS3 Multiple?
Створіть кілька стовпців
Перш ніж створити стовпці, ми підготували деякі текстові абзаци для демонстрації, загорнуті в HTML5 тег, як слід;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum у вересні. Donec vel tempor dolor. Donec volutpat fringilla porta. Призупиняти не можна. Quisque commodo ornare mi, сидіти аме алікеті justo bibendum non. Цілочисельний випадок консервації, що міститься у вашому розпорядженні. //і так далі
… І вкажіть ширину для 600px з таблиці стилів, це все.
Тепер почнемо створювати стовпці.
У наведеному нижче прикладі ми розділимо вміст на дві колонки з Колонка-кол власності. Це властивість повідомлятиме веб-переглядачу відображати вміст у стовпцях за вказаним номером і дозволити браузеру визначити правильну ширину для кожного стовпця.
стаття -вебкіт-колонка-кол: 2; -moz-count-count: 2; кількість стовпців: 2;
Окрім визначення кількості, стовпці можна створити, вказавши ширину за допомогою ширина колонки властивості та залишення браузера, щоб визначити, скільки стовпців повинно бути створено на місці.
У цьому прикладі ми задаємо ширину стовпця для 150px, що призвело до того, що зміст було розділено на три колонки.
стаття -moz-column-width: 150px; -webkit-width-width: 150px; ширина колонки: 150px;
Як зазначено в специфікації. фактична ширина стовпця може бути ширшою або вужчою, ніж вказана ширина стовпця, залежно від наявного простору. Крім того, якщо значення ширини явно не вказано, “авто” буде прийнято за замовчуванням, що також може означати “немає стовпця”.
Розрив стовпців
Розрив стовпців визначають пробіли, які розділяють кожен стовпець. Значення розриву можна вказати в em або px, але як зазначено в специфікації значення не може бути негативним. У наведеному нижче прикладі ми вказуємо розрив для 30px, тому проміжки між стовпцями виглядають трохи ширше.
article -webkit-column-gap: 30px; -moz-column-gap: 30px; розрив стовпців: 30px;
Правило стовпця
Якщо ви хочете додати межі між стовпцем, можна скористатися правило стовпця майно, яке працює дуже схоже на кордону власності. Так, скажімо, якщо ми хочемо покласти пунктирну межу між стовпчиком, ми можемо написати;
стаття -moz-column-rule: 1px пунктирна #ccc; -webkit-column-rule: 1px пунктирна #ccc; правило-стовпець: 1px пункту #ccc;
Стовпець Span
Ця властивість працює досить схожою на colspan в таблиці . Загальною реалізацією цього властивості є розміщення заголовка вмісту у всіх стовпцях. Ось приклад.
стаття h1 -webkit-column-span: все; колонка-проліт: все;
У наведеному вище прикладі ми визначили h1 щоб охопити всі стовпці, і якщо вказано проміжок стовпця, 1 буде прийнято за замовчуванням. На жаль, ця властивість на момент написання цієї статті працює лише в Opera та Chrome.
Заключні слова
Це все на даний момент, ми прийшли через всі необхідні речі для створення декількох стовпців з CSS3, і, як ми вже згадували на початку, цей модуль працює дуже добре в сучасних браузерах, але він ще не працює в Internet Explorer.
Зрештою, ми сподіваємося, що ви тепер маєте достатньо розуміння, як створити стовпці з CSS3, і якщо у вас є час для експериментів, не соромтеся поділитися своїми методами та результатами у полі для коментарів нижче. Дякуємо, що прочитали цей пост і отримали задоволення.
- Демо
- Завантажити джерело
