多列佈局（Multi-column）
多列版面就是將文字內容設計成像報紙那樣的多列版面。或者說在之前我們透過js或JQuery才能實現的瀑布流，在CSS3中我們可以直接透過CSS就可以實現，雖然有相容性上面的問題。 。
相容性
IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1
多列佈局的屬性
CSS3 中提供了一系列實現多列佈局的屬性，如下表所示：
1.columns 設定物件的列數個每列的寬度
設定或檢索物件的列數和每列的寬度。
文法:
columns:<'column-width'>||<'columns-count'>;
參數說明：
（1）第一個參數指每列的寬度
（2）第二個參數指列數。可寫兩個，也可寫一個。
兩個參數優先考慮列數（在放的下的情況下）。若是寬度不夠（列數*設定的寬度>容器的寬度），將會自動減少一列，並自動加寬段落的寬度，使其達到容器的寬度。中間自動產生合適的間距。
舉例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>多列版面配置</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3);}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{ border:2pxsolidred;}div.test2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style>< /head><body><div><div>從C語言的發明者丹尼斯里奇的發明之初定位，我們知道它就是要做系統的，本身就不是做圖形化軟體的，應該是包括開發驅動、做系統核心、文件管理、內管管理、網路通訊等等一系列核心的，因此單純學習C語言的語法，還要學習作業系統原理、通訊協定、編譯器原理、資料結構等其他學科才可以完成前面的需求的。 </div><div>這時候你看到全英文的主機板說明書的時候，才知道應該讀取哪個介面、通訊協定是如何規定的，應該讀幾個位元組...等等，才可以寫驅動才可以寫內核才可以做通信，到這個程度，即便社會上企業人才需求比較少，但也根本不存在找不到工作問題，而是你挑工作甚至帶工資挑，因為不光你可以做這些，許多關聯的工作，例如驅動開發、DNS解析、防毒、通訊安全、虛擬化技術、內核剪裁都可以勝任了，甚至可以自己開發新的作業系統。 </div><div>話說回來，我們目前的大環境，C語言絕大多數大學的教學定位，僅部分院校除了C語言課程外，還應該開設資料結構、電腦體系結構、編譯器原理、作業系統原理等課程，而這些課程中有些學校僅保留資料結構，甚至資料結構也不開設了，因此把C語言僅僅定位為程式啟蒙，熟悉面向過程思想、熟悉C語言語法即可。 </div><div>學校更希望的是透過C語言學習後進而學習C++或者java或者其他高級語言進而可以更實用的做出東西來從而好找工作，再急於求成一些的話，乾脆C語言也不學了，零基礎直接學java或C++其他高階語言。這其實也是專業的科班到培訓機構的區別，沒有白學的知識，到底有沒有用大家多想想。 </div></div><br><div><div>所以從目前整體大環境看，你如果在重點院校，電腦/軟體的科班專業，那麼你應該好好搞這些真材實料的東西，不要浪費國家的教學資源，因為你承擔了國家未來IT軟體產業的未來；如果你想從事軟體研發/開發，那麼你至少也要學習好資料結構，因為你要創造要創作，而不是複製貼上代碼的搬運工。如果你只是想混口飯吃，直接學個能出成果的技術就行了。 </div><div>最後在看看普遍同學學C語言的目的，專升本、考研、二級C語言，以需求為導向的教程、大多是理論題、刷題、考試為主，因此項目類偏難的C語言資源少很多，自然很少看到圖形化的東西。當然，Dotcpp作為C語言的堅定支持者，今後也會加強這裡的程式資源，從而提供大家足夠的資源支持。 </div><div>我們學習C語言的時候因為是選擇控制台程序，所以你的程式都是在黑窗口下運行，如果寫windows應用程式則沒有這個黑窗口了，依舊是C語言的語法，大家可以了解。 </div><div>如果是純C語言的圖形化開發，依照大家的所處的階段，可以考慮用TurBoC編譯器支援的graphics圖形介面函數或VC6安裝easyX函式庫來實現圖形化的開發，可以完成一些遊戲的開發，例如五子棋、俄羅斯方塊、彈珠遊戲、貪吃蛇等等，都是圖形化可交互的，在高級一些，考慮到圖片刷新，專業性的提升，則可以考慮用MFC， MFC或者QT。 </div></div></body></html>運行結果：
設定div.test1的columns：300px 4; 也就是每列寬度300px,一共有4列，但是容器的為900px，小於1200px，所以會自動減少列數，適當增加列寬來以最合適的方式來顯示。而div.test2沒有設定容器寬度，列寬設定為300px，列數設定為4列，會有限考慮列數去優化列寬。
注意：設定div.test1的columns：300px 4; 也就是每列寬度300px,一共有4列，但是容器的為900px，小於1200px，所以會自動減少列數，適當增加列寬來以最合適的方式來顯示。而div.test2沒有設定容器寬度，列寬設定為300px，列數設定為4列，會有限考慮列數去優化列寬。
2. column-width 設定列寬
文法:
columns-width：<length>|auto預設;
: 用長度值來定義列寬，不允許負值；auto：根據列數自訂分配寬度。
雖說設定了列寬，但還是會根據列數和容器寬度來自動分配寬度。
PS：每列中的空隙為14像素。
3. column-count 設定列數
設定或檢索物件的列數。
文法:
column-count：<integer>|auto;
參數說明：: 用整數值來定義列數，不允許負值；auto：根據列寬自訂分配寬度。
4. column-gap 設定列之間的間隙
設定或檢索物件的列與列之間的間隙。
文法:
column-gap：<length>|normal;
參數說明：用長度值來定義列與列之間的間隙（不是字與字間的距離，而是段落與段落間的距離），不允許負值；normal：與字體大小相同。 norm al間隙取決於字體大小。和字體大小相等。
舉例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>多列版面配置</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{background-color:rgb(0,0,0,.3);margin -top:20px;}div.test1{width:900px;columns:300px4;font-size:14px;}div.test2{columns:400px;font-size:30px;}div.test3{column-count:4; column-gap:14px;}</style></head><body><h3>字體：14px，沒有設定間隙：預設和字體一樣14px;</h3><div><div>很多學習過C語言的朋友回過頭看C語言的時候一定會有這樣的疑問，為啥C語言都在黑窗口下運作？不是計算三角形面積就是印出水仙花數這樣的程式？當初說好的程式設計怎麼厲害，那些酷炫的軟體怎麼還是不會做，到頭來都是一些小兒科！為什麼呢。 </div><div>第一，C語言的發明定位，從C語言的發明者丹尼斯里奇的發明之初定位，我們知道它就是要做系統的，本身就不是做圖形化軟體的，應該是包括開發驅動、做系統核心、文件管理、內管管理、網路通訊等等一系列核心的。 </div><div>第二、國內普遍的教學定位，話說回來，我們目前的大環境，C語言絕大多數大學的教學定位，僅部分院校除了C語言課程外，還應該開設數據結構、電腦體系結構、編譯器原理、作業系統原理等課程。 </div><div>此外，萬安縣紀委監委已對縣教育體育局、縣市場和品質監督管理局、澇田鄉政府等相關單位和人員履職盡責情況進行了調查，並對監管不力的縣教育體育局、縣市場和品質監督管理局、縣農業局、縣衛計委、澗田鄉政府等相關單位責任人分別進行了立案審查等處理。同時，縣紀委監委對學生營養餐的招標工作進行調查，待調查結果出來後第一時間向社會公佈。 </div></div><br><h3>字體：30px,沒有設定間隙：預設和字體一樣30px;</h3><div><div>很多學習過C語言的朋友在回頭看C語言的時候一定會有這樣的疑問，為啥C語言都在黑窗口下運作？不是計算三角形面積就是印出水仙花數這樣的程式？當初說好的程式設計怎麼厲害，那些酷炫的軟體怎麼還是不會做，到頭來都是一些小兒科！為什麼呢。 </div><div>第一，C語言的發明定位，從C語言的發明者丹尼斯里奇的發明之初定位，我們知道它就是要做系統的，本身就不是做圖形化軟體的，應該是包括開發驅動、做系統核心、文件管理、內管管理、網路通訊等等一系列核心的。 </div><div>第二、國內普遍的教學定位，話說回來，我們目前的大環境，C語言絕大多數大學的教學定位，僅部分院校除了C語言課程外，還應該開設數據結構、電腦體系結構、編譯器原理、作業系統原理等課程。 </div><div>第三、C語言完全可以做，但很少直接用C語言做，我們學習C語言的時候因為是選擇控制台程序，所以你的程序都是在黑窗口下運行，如果寫windows應用程式就沒有這個黑窗口了，依舊是C語言的語法，大家可以了解。 </div></div><br><h3>字體：30px,設定間隙：14px;</h3><div><div>很多學習過C語言的朋友在回過頭看C語言的時候一定會有這樣的疑問，為啥C語言都在黑窗口下運作？不是計算三角形面積就是印出水仙花數這樣的程式？當初說好的程式設計怎麼厲害，那些酷炫的軟體怎麼還是不會做，到頭來都是一些小兒科！為什麼呢。 </div><div>第一，C語言的發明定位，從C語言的發明者丹尼斯里奇的發明之初定位，我們知道它就是要做系統的，本身就不是做圖形化軟體的，應該是包括開發驅動、做系統核心、文件管理、內管管理、網路通訊等等一系列核心的。 </div><div>第二、國內普遍的教學定位，話說回來，我們目前的大環境，C語言絕大多數大學的教學定位，僅部分院校除了C語言課程外，還應該開設數據結構、電腦體系結構、編譯器原理、作業系統原理等課程。 </div><div>第三、C語言完全可以做，但很少直接用C語言做，我們學習C語言的時候因為是選擇控制台程序，所以你的程序都是在黑窗口下運行，如果寫windows應用程式就沒有這個黑窗口了，依舊是C語言的語法，大家可以了解。 </div></div></body></html>運行結果：
5. column-rule 設定列與列之間的邊框
文法:
column-rule：<column-rule-width>||<column-rule-style>||<column-rule-color>
參數說明
● column-rule-width 邊框的厚度
●column-rule-style 邊框的樣式
●column-rule-color 邊框的顏色
PS：特別注意，如果列與列之間的間隙< 邊框的寬度，這就會出現列蓋在邊框上的情況。
（1）column-rule-width
設定或檢索物件的列與列之間的邊框厚度。
文法:
column-rule-width：<length>|thin|medium|thick;
參數說明
●length：用長度值來定義邊框的厚度，不允許負值；
●medium：定義預設厚度的邊框；
●thin：定義比預設厚度細的邊框；
●thick：定義比預設厚度粗的邊框。
（2）column-rule-style 設定邊框的樣式
設定或檢索物件的列與列之間的邊框樣式。
文法
column-rule-style：none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset；
參數說明
●none：無輪廓；
●hidden：隱藏邊框；
●dotted：點狀輪廓；
●dashed：虛線輪廓；
●solid：實線輪廓；
●double：雙線輪廓；
●groove：3D凹槽輪廓；
●ridge：3D凸槽輪廓；
●inset：3D凹邊輪廓；
●outset：3D凸邊輪廓。
注意：如果是有兩條線的輪廓，width將會是包含了兩條線的距離。
（3）column-rule-color 設定邊框顏色
設定或檢索物件的列與列之間的邊框顏色。
文法:
column-rule-color：<color>;
參數說明：指定顏色。沒有寬度沒有樣式，顏色將會失效。預設黑色。
6. column-span 設定元素跨所有列
設定或檢索物件元素是否橫跨所有列。
文法:
column-span：none|all；
參數說明：none：不跨列；all：橫跨所有列。
不是像其他column屬性用在容器當中，而是用在容器裡的子元素當中。
7. column-fill 設定列與列的高度統一（目前主流瀏覽器都不相容）
設定或檢索物件所有欄位的高度是否統一。
文法:
column-fill:auto預設|balance;
參數說明：auto：列高度自適應內容；balance：所有列的高度以其中最高的一列統一。
主流瀏覽器都不相容此屬性。
8. column-break 設定換行
●column-break-before 設定指定物件前是否換行。
●column-break-after 設定指定物件後是否換行。
●column-break-inside 設定物件內部是否換行
（1）column-break-before
設定或檢索物件之前是否斷行。
文法:
column-break-before：auto|always|avoid；
參數說明：auto：既不強迫也不禁止在元素之前斷行並產生新列；always：總是在元素之前斷行並產生新列；avoid：避免在元素之前斷行並產生新列。
（2）column-break-after
設定或檢索物件之後是否斷行。
文法:
column-break-after：auto|always|avoid；
參數說明：auto：既不強迫也不禁止在元素之後斷行並產生新列；always：總是在元素之後斷行並產生新列；avoid：避免在元素之後斷行並產生新列。
（3）column-break-inside屬性
設定或檢索物件內部是否斷行。
文法:
column-break-inside：auto預設|avoid