想要使用CSS将div元素的内容分成多列来显示，可以使用columns属性。columns属性一个简写属性，可以设置列数和列宽，用于设置分栏模块。下面本篇文章就来给大家介绍一下columns属性，希望对大家有所帮助。
columns 属性是一个简写属性，一次可以采用多个值；用于设置列宽和列数。
语法：
属性值：
● auto： 这会将列宽和列计数值设置为其浏览器默认值。
示例：
效果图：
注意：如果未指定column-width和column-count中的任何值，则浏览器默认将其值设置为auto。
● column-width和columns-count ：用于使用整数值指定列宽和列数。
效果图：
浏览器支持：
● Chrome 50.0, 4.0 -webkit-
● Edge 10.0
● Firefox 52.0, 9.0 -moz-
● Safari 9.0, 3.1 -webkit-
● Opera 37.0, 15.0 -webkit- 11.1
如果不考虑兼容，css3新增了一些计算位置的选择器：
:first-of-type 选择属于其父元素的首个 <p>元素的每个 <p>元素
:last-of-type 选择属于其父元素的最后 <p>元素的每个 <p>元素。
:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p>元素。
:only-child 选择属于其父元素的唯一子元素的每个 <p>元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p>元素。
:nth-last-child(n) 同上，从最后一个子元素开始计数。
:nth-of-type(n) 选择属于其父元素第二个 <p>元素的每个 <p>元素。
:nth-last-of-type(n) 同上，但是从最后一个子元素开始计数。
举个例子，要把表格第三行第三列的字体改成红色：
table tr:nth-child(3)>td:nth-child(3) {color: red
}
可以使用css的width标签实现一列的文字竖排显示。
具体步骤如下：
需要准备的材料分别是：电脑、浏览器、ultraedit。
1、在ue编辑器中新建一个空白的html文件，css文件。
2、在ue编辑器中输入以下html代码。
3、在ue编辑器中输入以下css代码。
4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。
5、在浏览器中打开此html文件，可以看到最终想要实现的一列的文字竖排显示效果。
