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

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

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

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

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

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

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

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

二、了解基本用法

1、column-count和column-width

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

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

2、column-rule和column-gap

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

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

3、column-span

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

三、淺談應(yīng)用

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

看起來(lái)的確不錯(cuò)，但是感覺(jué)有那么點(diǎn)怪。

怪在哪里呢？因?yàn)槟銕缀醪粫?huì)看到展示文章的網(wǎng)站中采用這種方式排版。（為了驗(yàn)證這一點(diǎn)特地查看了大部分的雜志或者新聞網(wǎng)站）。

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

 .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;
  }

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

每一欄的寬度必須控制在一個(gè)字左右，所以這里對(duì)于容器的寬度有嚴(yán)格的要求；
通過(guò)word-wrap: break-word屬性使中文的標(biāo)點(diǎn)符號(hào)換行；

那么不用多欄布局是否也能實(shí)現(xiàn)上述的排版呢？當(dāng)然可以！并且我們又要認(rèn)識(shí)一個(gè)新的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%;
  }