布局—column（属性）

column-width:||用来定义多列中每列的宽度,用像素表示
column-count：||用来定义多列中的列数，用数字来表示1-10
columns: 200px 2||列宽和列数
column-gap: normal||默认值，默值为1em
column-gap: length ||用来设置列与列之间的间距,可以用px,em单位的任何整数值，但不能是负值。
column-rule:column-rule-width ||用来定义列与列之间的边框宽度
column-rule:column-rule-style ||用来定义列与列之间的边框样式
column-rule:column-rule-color ||用来定义列与列之间的边框颜色
column-span: none || 默认值，不跨越任何列。
column-span: all ||元素跨越所有列，并定位在列的Ｚ轴之上。

 <style>

     .columns{

          -webkit-columns:200px 3;  /*列宽是200像素，列数为3。*/

         -webkit-column-gap:30px;   /*列与列之间的间距是30像素*/

         -webkit-column-rule:2px solid green;  /*列与列之间的边框颜色是2像素的绿色。*/

          text-overflow: ellipsis;  /*用省略符号来代表被修剪的文本。*/

         white-space: nowrap;    /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/

         word-wrap: break-word;   /*在长单词或 URL 地址内部进行换行。*/

         box-sizing: border-box;}   /*规定两个并排的带边框的框*/

 </style>

巴特西

布局—column（属性）

最新文章

热门文章