css3多欄版面配置容器的屬性：
column-width: auto | < length > ：給列定義一個最小寬度（min-width）。
auto: 列寬由其他元素決定。
length: 顯式設定最小寬度。
column-count: auto | < integer >：定義列的數量。
auto: 元素只有一列。就像沒有設定一樣。
< integer >: 正整數值。取值是大於0的整數，負值無效。
columns: < column-width > || < column-count >：是column-width和column-count的簡寫。次序隨意。
列寬 = （ 父元素寬度 - （列數-1） 列間隙 ） / 列數*
比如：父元素40em，分為4列，列間隙為2em。那麼列寬為（ 40 - （4-1） * 2） / 4 = 8.5em。
如果顯式設定的列寬小於這個寬度，它會以這個寬度展示。
如果顯式設定的列寬大於這個寬度，它會按照合適的尺寸重新排列列寬和列數。當前設定的列寬和列數並不準確。
column-gap: normal | < length >：定義列間距。值過大時會撐破布局。
normal: 預設值，由瀏覽器解析，一般是lem。
< length >: 有浮點數字和單位標識符組成的長度值。如：2.1em。
column-rule: < column-rule-width > | < column-rule-style > | < column-rule-color >：定義列邊框。
它的中心線始終和列間距的中心線一樣。換言之，它總處於兩列的中間。和border類似。如果列邊框大於列間距，並不會自動消失。列邊框超出列間距的部分就像是沉在文字的下方一樣（背景效果）。
column-fill: auto | balance：定義多列中每一列的高度是否統一。
這個屬性很奇怪。並且在瀏覽器中不統一。它有兩個值：auto | balance。在 ie10/ie11/opera40/chrome52中測試的結果都是一樣的，發現這兩個屬性並沒有區別。在firefox49中測試，這兩個屬性是有區別的，其中balance是每列高度差不多（對齊），auto就自動合并成一列了，無論自己設定的是多少列。
css3多欄版面配置項目（元素）屬性：
column-span: none | all：定義一個元素橫跨多少列。
如果我們常將標題橫跨所有列。那麼，column-span: all。其預設值是，column-span: none；表示不跨列。
css3多欄版面配置代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>多欄版面配置｜column-span</title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrapper { width: 40em; margin:0 auto; border: 1px solid #ccc; /*多欄版面配置*/ -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; -moz-column-rule: .1em dashed #ccc; -webkit-column-rule: .1em dashed #ccc; column-rule: .1em dashed #ccc; -webkig-column-fill: balance; -moz-column-fill: balance; column-fill: balance; } h1 { font-size: 1.5em; margin-bottom: 1em; -moz-column-span: all; -webkit-column-span: all; column-span: all; padding-bottom: 5px; text-align: center; border-bottom: 2px solid #ccc; } p { margin-bottom: 1em; text-indent: 2em; line-height: 1.625; font-size: .7em; } </style></head><body> <div> <h1>為什麼您寧願吃生活的苦，也不願吃學習的苦？</h1> <h3>一. 為什麼大多數人寧願吃生活的苦，也不願吃學習的苦？</h3> <p>記得小時候上學，學校每次放月假，爺爺就去車站接我回家。那時家裡離車站遠，需要騎著車子來回。一路上我們彼此相對無語，等到爺爺騎不動了，我們就這麼一前一後推著車子走著，記得爺爺常常和我說：“吃得苦中苦，方為人上人，你日後要好生讀書。”那時的我未解其意，只是默默記在心裡，望著不遠處稻田裡的鄉親們彎腰割麥俯首插秧，我覺著他們太辛苦了。幾年過去了，我考入了省城上大學，學了這個城市最熱門也最富前景的工程造價專業。後來，我走進實習單位， 工地的環境有多麼糟糕自不必多說，晴天塵土飛揚驕陽似火，雨天泥濘不堪汙水四溢。物質世界的貧瘠尚可以忍受，然而精神世界的荒蕪會隨著時間慢慢消磨你的夢想和純真。後來，我選擇去了深圳，在那裡我終於找到了自己熱愛的行業，眼前陌生的一切都讓我感到興奮和歡愉。人工智慧、自動駕駛、虛擬現實、風投、天使輪這些名詞讓我看到了世界的另一面。越是不斷地拓寬知識面，越是覺得自己知識儲備量的貧瘠與荒涼。</p> <h3>二. 生活的痛苦使人麻痹，學習的痛苦讓人清醒 ；過去不按思維而生活，終將有一天要按照生活而思維</h3> <p>痛苦之所以不被人喜歡，大多數是因為人們從不會思考自己為何痛苦。然而，這世上還有另一種痛苦是，對這個世界產生了失望的情緒，然後把自己對這個世界的失望，當作是自己本該如此，甚至誤以為這就是吃苦的好處。我總覺得苦難的意義，在於我們更好地去思考人生為何如此苦難，就像有人曾說：未經省察的人生，從不值得一過。如果沒有經過思索和自省，苦難終究只是苦難而已，沒有任何意義。有些人，年輕時總覺得學不學習無關緊要，反正自己體力好得很，只要自己身體好就能混口飯吃。他們終將會明白，那些為了討生活不得已而吃的苦，就是當年不吃學習苦的代價。學習的苦，是枯燥的苦，是短期沒有回報的苦，這種苦看得見，摸得著，誰都不願吃。生活的苦，是絕望的苦，是長期沒有出路的苦，這種苦看不見，摸不著，誰都不想吃。我從不喜歡自討苦吃，如果我能通過學習和自我提升避免遇見這些痛苦的經曆，我有什麼理由不去學習？生活其實並不苦，苦的是那個不知苦也不知如何避免吃苦的人生。學習其實並不苦，苦的是早已被生活消磨掉的好奇心和敢於對未來報有期望的勇氣。</p> </div></body></html>
運行效果：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
