Latest web development tutorials

CSS3 нескольких столбцов

Содержание CSS3 текст может быть разработан как макет нескольких столбцов газеты, следующие примеры:

Этот учебник - наука не только технологии, но и мечта! В этом руководстве (www.w3big.com) обеспечивает наиболее полное программирование на основе технологии учебное пособие знакомит с основами HTML, CSS, JavaScript, Python, Java, Ruby, C, PHP, MySQL и других языков программирования. Но сайт также предоставляет ряд примеров в Интернете, в качестве примера, вы можете лучше научиться программированию.


Поддержка браузеров

Цифры в таблице представляют собой первый браузер, поддерживающий номер версии метода.

Сразу после номера -webkit- браузера или -moz- указанного префикса.

свойство
столбец подсчета 4.0 -webkit- 10,0 2.0 -moz- 3.1 -webkit- 15,0 -webkit-
11.1
колонного разрыв 4.0 -webkit- 10,0 2.0 -moz- 3.1 -webkit- 15,0 -webkit-
11.1
колонного правило 4.0 -webkit- 10,0 2.0 -moz- 3.1 -webkit- 15,0 -webkit-
11.1
колонного правило цвета 4.0 -webkit- 10,0 2.0 -moz- 3.1 -webkit- 15,0 -webkit
11.1
колонного правило стиле 4.0 -webkit- 10,0 2.0 -moz- 3.1 -webkit- 15,0 -webkit
11.1
колонного правило ширины 4.0 -webkit- 10,0 2.0 -moz- 3.1 -webkit- 15,0 -webkit
11.1
колонного ширина 4.0 -webkit- 10,0 2.0 -moz- 3.1 -webkit- 15,0 -webkit
11.1

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

В этой главе мы узнаем еще несколько свойств CSS3 столбцов:

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

CSS3 для создания нескольких столбцов

column-count атрибут указывает число столбцов должны быть разделены.

Элемент Следующий пример <DIV> в тексте делится на три части:

примеров

DIV {
-webkit-колонным Количество: 3; / * Chrome, Safari, Opera * /
-moz-колонным Количество: 3; / * Firefox * /
столбец подсчета: 3;
}

Попробуйте »

CSS3 разрыв нескольких столбцов между колоннами и столбцов

column-gap свойство задает промежуток между колоннами и колоннами.

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

примеров

DIV {
-webkit-колонным разрыв: 40px; / * Chrome, Safari, Opera * /
-moz-колонным разрыв: 40px; / * Firefox * /
колонного разрыв: 40px;
}

Попробуйте »

Границы столбцов CSS3

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

примеров

DIV {
-webkit-колонным правило стиля: твердый; / * Chrome, Safari, Opera * /
-moz-колонным правило стиля: твердый; / * Firefox * /
колонного правило стиля: твердый;
}

Попробуйте »

column-rule-width атрибут определяет толщину границы двух:

примеров

DIV {
-webkit-колонным правил ширина: 1px; / * Chrome, Safari, Opera * /
-moz-колонным правил ширина: 1px; / * Firefox * /
колонного правило ширина: 1px;
}

Попробуйте »

column-rule-color атрибут определяет цвет границы двух:

примеров

DIV {
-webkit-колонным правило цвета: Lightblue; / * Chrome, Safari, Opera * /
-moz-колонным правило цвета: Lightblue; / * Firefox * /
колонного правило цвета: Lightblue;
}

Попробуйте »

column-rule свойство сокращенная для всех столбцов-rule- * свойствами.

В следующем примере столбец непосредственно для толщины границы, цвета и стиля:

примеров

DIV {
-webkit-колонным правило: 1px твердый Lightblue; / * Chrome, Safari, Opera * /
-moz-колонным правило: 1px твердый Lightblue; / * Firefox * /
колонного правило: 1px твердый Lightblue;
}

Попробуйте »

Сколько столбцов через указанный элемент

Следующий пример определяет элемент <h2> во всех колонках:

примеров

h2 {
-webkit-колонным период: все; / * Chrome, Safari, Opera * /
колонка период: все;
}

Попробуйте »

Задает ширину столбцов

column-width атрибут определяет ширину столбца.

примеров

DIV {
-webkit-колонным ширина: 100px; / * Chrome, Safari, Opera * /
колонного ширина: 100px;
}

Попробуйте »

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

В следующей таблице перечислены все атрибуты CSS3 нескольких столбцов:

свойство описание
столбец подсчета Количество столбцов, указанных элементов должны быть разделены.
колонного заполнения Указывает, как заполнять столбцы
колонного разрыв Определяет промежуток между столбцами и
колонного правило Все колонки-rule- * сокращённое свойство
колонного правило цвета Определяет цвет границы между двумя
колонного правило стиле Укажите стиль границы между двумя
колонного правило ширины Определяет толщину границы между двумя
колонка-пролетный Определяет, сколько столбцов, чтобы пересечь элемент
колонного ширина Задает ширину столбцов
столбцы Установка столбца ширины и столбца подсчета стенографии