ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Несколько столбцов


CSS Многостолбцовый макет

Многостолбцовый макет CSS позволяет легко определять несколько столбцов текста - как в газетах:

Daily Ping

Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


CSS Свойства нескольких столбцов

В этой главе вы узнаете о следующих свойствах нескольких столбцов:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Поддержка браузерами

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS Создать несколько столбцов

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

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

Пример

div {
  column-count: 3;
}
Попробуйте сами »

CSS Укажите разрыв между столбцами

Свойство column-gap определяет разрыв между столбцами.

В следующем примере указывается зазор в 40 пикселей между столбцами:

Пример

div {
  column-gap: 40px;
}
Попробуйте сами »

CSS Разделитель между столбцами

Свойство column-rule-style определяет стиль разделителя между столбцами:

Пример

div {
  column-rule-style: solid;
}
Попробуйте сами »

Свойство column-rule-width определяет ширину разделителя между столбцами:

Пример

div {
  column-rule-width: 1px;
}
Попробуйте сами »

Свойство column-rule-color определяет цвет разделителя между столбцами:

Пример

div {
  column-rule-color: lightblue;
}
Попробуйте сами »

Свойство column-rule является сокращенным свойством для установки всех свойств выше column-rule-*.

В следующем примере задаются ширина, стиль и цвет разделителя между столбцами:

Пример

div {
  column-rule: 1px solid lightblue;
}
Попробуйте сами »

Укажите, сколько столбцов должен охватывать элемент

Свойство column-span указывает, сколько столбцов должен охватывать элемент.

В следующем примере указывается, что элемент <h2> должен охватывать все столбцы:

Пример

h2 {
  column-span: all;
}
Попробуйте сами »

Укажите ширину столбца

Свойство column-width определяет рекомендуемую оптимальную ширину для столбцов.

В следующем примере указывается, что рекомендуемая оптимальная ширина для столбцов должна составлять 100 пикселей:

Пример

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 Сокращенное свойство для установки ширины столбца и количества столбцов