?

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 ||元素跨越所有列，并定位在列的Ｚ軸之上。

1 <style> 2 .columns{ 3 -webkit-columns:200px 3; /*列寬是200像素，列數為3。*/ 4 -webkit-column-gap:30px; /*列與列之間的間距是30像素*/ 5 -webkit-column-rule:2px solid green; /*列與列之間的邊框顏色是2像素的綠色。*/ 6 text-overflow: ellipsis; /*用省略符號來代表被修剪的文本。*/ 7 white-space: nowrap; /*文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。*/ 8 word-wrap: break-word; /*在長單詞或 URL 地址內部進行換行。*/ 9 box-sizing: border-box;} /*規定兩個并排的帶邊框的框*/ 10 </style>

?

轉載于:https://www.cnblogs.com/amy-1205/p/5845772.html

總結

以上是生活随笔為你收集整理的布局—column（属性）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。