淺談CSS 多欄布局（Multi-Columns Layout）

發(fā)布時間：2018-09-20 15:41:53 作者：descire

我要評論

這篇文章主要介紹了淺談CSS 多欄布局（Multi-Columns Layout）的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

多欄布局是CSS3新增布局中的一種，盡管它很低調(diào)。

一、明確結(jié)構(gòu)

多欄布局的結(jié)構(gòu)很簡單，主要由multi-column container和column box組成。

當一個元素設(shè)置了column-width和column-count屬性并且值不為auto，那么這個元素就是multi-column container。

multi-column container內(nèi)部通過多個column box來展示內(nèi)容。

二、了解基本用法

1、column-count和column-width

通過這兩個屬性，我們可以控制分欄的數(shù)目，但是相比較count屬性，width屬性就顯得很靈活。

當設(shè)置width屬性之后，并不是說分欄的寬度就是這個固定的值，它還會結(jié)合分欄布局容器中的寬度靈活的多增少減。

2、column-rule和column-gap

這兩個屬性主要幫助我們設(shè)置分欄之間的間隙以及分欄的樣式，還是比較好理解的：

這里你可以將column-rule的寬度設(shè)置的大一些，會有驚奇的發(fā)現(xiàn)哦。

3、column-span

這個屬性和table中的span屬性差不多，但是它只有none和all兩個值，并且它前后的內(nèi)容都得按照分欄布局規(guī)則重新排列。

三、淺談應用

掌握基礎(chǔ)結(jié)構(gòu)和用法之后，現(xiàn)在可以對一篇文章進行漂亮的排版了：

看起來的確不錯，但是感覺有那么點怪。

怪在哪里呢？因為你幾乎不會看到展示文章的網(wǎng)站中采用這種方式排版。（為了驗證這一點特地查看了大部分的雜志或者新聞網(wǎng)站）。

其實看到這種多欄布局，我第一時間想到的是古書的排版，那么我們可以采用這種分欄布局實現(xiàn)古書的排版方式：

 .demo {
    width: 300px;
    margin: 100px auto;
    columns: 10;
    column-rule: 1px dashed rgb(213,213,213);
    direction: rtl;
    word-wrap: break-word;
    text-align: center;
  }

在采用多欄布局的方式實現(xiàn)這種效果時需要注意：

每一欄的寬度必須控制在一個字左右，所以這里對于容器的寬度有嚴格的要求；
通過word-wrap: break-word屬性使中文的標點符號換行；

那么不用多欄布局是否也能實現(xiàn)上述的排版呢？當然可以！并且我們又要認識一個新的CSS3成員 -- writing-mode：

  .demo {
    width: 180px;
    margin: 50px auto;
    height: 170px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 1px;
    writing-mode:vertical-rl;
    background: repeating-linear-gradient(to left, #000, #000 3%, #FFF 3%, #FFF);
    background-size: 30px 100%;
  }