WEB-нотатки - записник он-лайн

multi-column в CSS3. Багатоколоночна розбивка тексту.

Приклад коду разом з хаками для популярних браузерів:

Code

.mycontainer {
column-count:4;
column-gap:20px;
column-width:150px;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-width:150px;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-width:150px;
}

Розберемось з кодом.

Виставимо кількість колонок:

Code

column-count:4;

Відстань між колонками:

Code

column-gap:20px;

Ширина колонки:

Code

column-width:150px;

Можна вставити вертикальний розділювач між колонками:

Code

column-rule:1px solid #000000;

Хаки для браузерів:

Code

-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-width:150px;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-width:150px;

Демо сторінка:
multi-column

Категорія: CSS3 · Додав: mr_smith (04.06.2010)

Переглядів: 740 · Рейтинг: 5.0/2

Всього коментарів: 0

Додавати коментарі можуть лише зареєстровані користувачі.
[ Реєстрація | Вхід ]

Головна
Реєстрація
Вхід

Пошук

Категорії

HTML

PHP

JavaScript

CSS

HTML5

CSS3

jQuery

uCoz

Друзі сайту

Червоне - зробимо кращим

SMITH