Багатоколоночних текст на css3.

Відео: Уроки по CSS / CSS3. Частина 23. Багатоколоночних текст

У цій статті ми поговоримо про те, як розбити текст на колонки за допомогою CSS3.

Раніше, щоб розбити текст на колонки, нам потрібно було використовувати float. Тепер же для цього є окрема властивість. Щоб було зрозуміліше, створимо невелику html розмітку.

 
 
Multi-columns in CSS3 
charset="Utf-8"gt; 
 
 
class="Block"gt; 
 Тема H2 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis alias architecto nulla facilis! Recusandae, sunt, impedit quidem perferendis iste fugit inventore similique aut dolore magnam est quasi quas sit magni commodi reiciendis tempore laudantium blanditiis non at nostrum ut officia enim eum possimus officiis atque excepturi tenetur consequuntur aliquam! Eligendi? 
 Тема H2 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt, veritatis quas id voluptate eum corrupti saepe voluptas vel nostrum nulla velit maiores fuga molestiae nisi sit esse consectetur nesciunt assumenda minus labore temporibus laborum eius sint corporis. Consectetur, maiores est nisi debitis voluptatibus inventore unde magnam reiciendis placeat aut. 
 Тема H2 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt, veritatis quas id voluptate eum corrupti saepe voluptas vel nostrum nulla velit maiores fuga molestiae nisi sit esse consectetur nesciunt assumenda minus labore temporibus laborum eius sint corporis. Consectetur, maiores est nisi debitis voluptatibus inventore unde magnam reiciendis placeat aut.

Отже, у нас є текст. Щоб розбити його на 3 колонки, потрібно скористатися властивістю column-count

Відео: CSS CSS3 Урок 23 Багатоколоночних текст

.block { 
 column-count:3- 
}

Також, ми можемо вказати ширину колонок, тоді їх кількість буде обчислюватися автоматично.

.block { 
 column-width:200px- 
}

За допомогою властивості colump-gap можна змінювати відстань між колонками.

.block { column-gap:100px-}

І, також, за допомогою властивості column-rule ми можемо ставити роздільник між колонками. Він задається так само, як і border.

column-rule:2px dashed # ccc-

Якщо ми поставимо нашого блоку висоту, то у нас з`явиться горизонтальний скрол. Що логічно :)

Відео: Створення многоколоночной шаблону за допомогою CSS3

Ось і все, що можна розповісти про цю властивість. Насамкінець варто лише додати, що підтримується воно погано: Internet Explorer починаючи з 10 версії, а android взагалі не підтримує. Так що, застосовуйте його тільки там, де текст і в одну колонку буде відображатися нормально.

Поділися в соціальних мережах:

Схожі