Лучшее руководство по CSS3 нескольких столбцов в 2024 году. В этом руководстве вы можете изучить Поддержка браузеров,CSS3 свойства нескольких столбцов,CSS3 для создания нескольких столбцов,CSS3 разрыв нескольких столбцов между колоннами и столбцов,Границы столбцов CSS3,Сколько столбцов через указанный элемент,Задает ширину столбцов,CSS3 свойства нескольких столбцов,
CSS3 нескольких столбцов
Содержание CSS3 текст может быть разработан как макет нескольких столбцов газеты, следующие примеры:
Этот учебник - наука не только технологии, но и мечта! В этом руководстве (www.w3write.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> в тексте делится на три части:
примеров
-webkit-колонным Количество: 3; / * Chrome, Safari, Opera * /
-moz-колонным Количество: 3; / * Firefox * /
столбец подсчета: 3;
}
Попробуйте »
CSS3 разрыв нескольких столбцов между колоннами и столбцов
column-gap
свойство задает промежуток между колоннами и колоннами.
Следующий пример определяет зазор между колонной и столбец 40 пикселей:
примеров
-webkit-колонным разрыв: 40px; / * Chrome, Safari, Opera * /
-moz-колонным разрыв: 40px; / * Firefox * /
колонного разрыв: 40px;
}
Попробуйте »
Границы столбцов CSS3
column-rule-style
свойство определяет столбцы стиль границы между колоннами:
примеров
-webkit-колонным правило стиля: твердый; / * Chrome, Safari, Opera * /
-moz-колонным правило стиля: твердый; / * Firefox * /
колонного правило стиля: твердый;
}
Попробуйте »
column-rule-width
атрибут определяет толщину границы двух:
примеров
-webkit-колонным правил ширина: 1px; / * Chrome, Safari, Opera * /
-moz-колонным правил ширина: 1px; / * Firefox * /
колонного правило ширина: 1px;
}
Попробуйте »
column-rule-color
атрибут определяет цвет границы двух:
примеров
-webkit-колонным правило цвета: Lightblue; / * Chrome, Safari, Opera * /
-moz-колонным правило цвета: Lightblue; / * Firefox * /
колонного правило цвета: Lightblue;
}
Попробуйте »
column-rule
свойство сокращенная для всех столбцов-rule- * свойствами.
В следующем примере столбец непосредственно для толщины границы, цвета и стиля:
примеров
-webkit-колонным правило: 1px твердый Lightblue; / * Chrome, Safari, Opera * /
-moz-колонным правило: 1px твердый Lightblue; / * Firefox * /
колонного правило: 1px твердый Lightblue;
}
Попробуйте »
Сколько столбцов через указанный элемент
Следующий пример определяет элемент <h2> во всех колонках:
примеров
-webkit-колонным период: все; / * Chrome, Safari, Opera * /
колонка период: все;
}
Попробуйте »
Задает ширину столбцов
column-width
атрибут определяет ширину столбца.
примеров
-webkit-колонным ширина: 100px; / * Chrome, Safari, Opera * /
колонного ширина: 100px;
}
Попробуйте »
CSS3 свойства нескольких столбцов
В следующей таблице перечислены все атрибуты CSS3 нескольких столбцов:
свойство | описание |
---|---|
столбец подсчета | Количество столбцов, указанных элементов должны быть разделены. |
колонного заполнения | Указывает, как заполнять столбцы |
колонного разрыв | Определяет промежуток между столбцами и |
колонного правило | Все колонки-rule- * сокращённое свойство |
колонного правило цвета | Определяет цвет границы между двумя |
колонного правило стиле | Укажите стиль границы между двумя |
колонного правило ширины | Определяет толщину границы между двумя |
колонка-пролетный | Определяет, сколько столбцов, чтобы пересечь элемент |
колонного ширина | Задает ширину столбцов |
столбцы | Установка столбца ширины и столбца подсчета стенографии |