column-span主要用來定義一個分列元素中的子元素能跨列多少列。前面大家都知道column-width，column-count等屬性讓一元素分成多列，不管里面元素如何排放順序，他們都是從左向右的放置內(nèi)容，但有時我們需要基中一段內(nèi)容或一個標題不進行任何分列，比如說分列元素中的標題不進行分列布局，需要橫跨所有列，此時我們就需要用到column-span屬性

語法：column-span: none || all

取值說明：

- 1. none:此值為默認值，表示不跨越任何列

- 2. all：這個值跟none剛好相反表示的是元素跨越所有列

html代碼上這個例子和前面的稍微改變了一下，就是把內(nèi)容分成了兩個段落p，只不過為了節(jié)省空間，我用了（…）代替略去的內(nèi)容；然后在內(nèi)容中間多加入了一個標題h2，按照以前的分列布局，不用我說大家都知道會是什么樣的效果，但今天我們需要讓標題h2不是存在單獨的列中，而是需要讓整個h2跨列，那就需要今天的column-span，具體的請看下面的代碼

效果圖明顯的告訴了大家，標題達到了我們需要的效果（Safari,Chrome,Opera）——整個標題跨了三列，除了這一點他還告訴我們一個信息。標題h2前面的段落p按列的布局進行了三列布局，然后運行到標題h2給斷列了，而h2標題后面的段落P同樣按照列的布局屬性進行了分列布局。這樣一來，如果大家需要在實際應用中將某個元素跨列，別的元素繼續(xù)分列布局，那么就可以考慮使用今天介紹的column-span

總結(jié)

以上是生活随笔為你收集整理的CSS之Multi-columns的跨列的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。