對於平面設計師來說,多欄或跨欄排版的應用非常普遍,像是報紙、雜誌、廣告 DM 等等,幾乎我們生活中看到的各種平面設計都會出現它的蹤跡。特別是遇到大量的文字內容,透過欄位的編排,除了增加閱讀趣味外,好的編排還可以讓內容更加容易閱讀,幫助理解,一舉多得。
對網頁設計師來說,由於網頁需要透過 HTML Tag 去標示各種區塊的關係,更多時候我們比較注重 Tag 所代表的語意而忽略版面的效果。例如:段落與段落之間我們會使用 P 標籤,這標籤只是告訴瀏覽器這是一段文章,預設的編排只是由上而下,手法上略顯單調,缺乏平面設計在編排上的巧思及趣味。
事實上,如果你有心的話,CSS 也有語法可以達到類似平面設計的多欄效果,雖然可以調用的參數不像平面設計那麼豐富,但花點心思去了解它,在有需要的時候就可以應用在案子上,提升使用者的閱讀體驗。
我們以三隻小豬的故事為例,請 AI 寫了一篇閱後的心得,常見的網頁編排如下:
《三隻小豬》是一個永不過時的經典童話故事,透過三隻小豬的生活經歷,深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀,這些價值觀不僅適用於童話世界,更是指引我們走向成熟與成功的重要道路。 首先,第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚,未來面臨大野狼的威脅時,無法守護自己。這告訴我們要有遠見,不要只看眼前的利益,應該有長遠的規劃和準備,以面對未知的挑戰。 接著,第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力,但他並沒有因此而放棄,最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難,並相信自己的能力。在生活中,我們或許會面臨各種各樣的挑戰,但只要有毅力堅持,定能克服困難,達成目標。 最後,第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋,最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動,不要草率行事,要有計劃地解決問題,並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。 這個故事讓我深刻體會到在生活中,勤勞、毅力和智慧的重要性。我們需要有遠見,堅持不懈地追求夢想,並願意學習解決問題的方法。這些價值觀將伴隨我們一生,指引著我們走向更加積極、成熟和成功的未來。我相信,《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
接著,我們透過 column-count 將欄位分成三欄
《三隻小豬》是一個永不過時的經典童話故事,透過三隻小豬的生活經歷,深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀,這些價值觀不僅適用於童話世界,更是指引我們走向成熟與成功的重要道路。
首先,第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚,未來面臨大野狼的威脅時,無法守護自己。這告訴我們要有遠見,不要只看眼前的利益,應該有長遠的規劃和準備,以面對未知的挑戰。
接著,第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力,但他並沒有因此而放棄,最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難,並相信自己的能力。在生活中,我們或許會面臨各種各樣的挑戰,但只要有毅力堅持,定能克服困難,達成目標。
最後,第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋,最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動,不要草率行事,要有計劃地解決問題,並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中,勤勞、毅力和智慧的重要性。我們需要有遠見,堅持不懈地追求夢想,並願意學習解決問題的方法。這些價值觀將伴隨我們一生,指引著我們走向更加積極、成熟和成功的未來。我相信,《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
多欄位的效果實現了,但欄位與欄位之間的預設距離似乎太窄,這時我們可以透過 column-gap 決定欄位與欄位的間隙,這裡我們給它設為 2em
《三隻小豬》是一個永不過時的經典童話故事,透過三隻小豬的生活經歷,深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀,這些價值觀不僅適用於童話世界,更是指引我們走向成熟與成功的重要道路。
首先,第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚,未來面臨大野狼的威脅時,無法守護自己。這告訴我們要有遠見,不要只看眼前的利益,應該有長遠的規劃和準備,以面對未知的挑戰。
接著,第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力,但他並沒有因此而放棄,最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難,並相信自己的能力。在生活中,我們或許會面臨各種各樣的挑戰,但只要有毅力堅持,定能克服困難,達成目標。
最後,第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋,最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動,不要草率行事,要有計劃地解決問題,並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中,勤勞、毅力和智慧的重要性。我們需要有遠見,堅持不懈地追求夢想,並願意學習解決問題的方法。這些價值觀將伴隨我們一生,指引著我們走向更加積極、成熟和成功的未來。我相信,《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
如果我們希望欄位與欄位間的區隔可以更清晰點,想增加一條分隔線時,可以透過 column-rule 來實現
《三隻小豬》是一個永不過時的經典童話故事,透過三隻小豬的生活經歷,深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀,這些價值觀不僅適用於童話世界,更是指引我們走向成熟與成功的重要道路。
首先,第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚,未來面臨大野狼的威脅時,無法守護自己。這告訴我們要有遠見,不要只看眼前的利益,應該有長遠的規劃和準備,以面對未知的挑戰。
接著,第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力,但他並沒有因此而放棄,最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難,並相信自己的能力。在生活中,我們或許會面臨各種各樣的挑戰,但只要有毅力堅持,定能克服困難,達成目標。
最後,第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋,最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動,不要草率行事,要有計劃地解決問題,並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中,勤勞、毅力和智慧的重要性。我們需要有遠見,堅持不懈地追求夢想,並願意學習解決問題的方法。這些價值觀將伴隨我們一生,指引著我們走向更加積極、成熟和成功的未來。我相信,《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
如果我們想給這篇文章一個標題,並且這個標題要橫跨三欄,這時可以使用 column-span: all 來實現
三隻小豬
《三隻小豬》是一個永不過時的經典童話故事,透過三隻小豬的生活經歷,深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀,這些價值觀不僅適用於童話世界,更是指引我們走向成熟與成功的重要道路。
首先,第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚,未來面臨大野狼的威脅時,無法守護自己。這告訴我們要有遠見,不要只看眼前的利益,應該有長遠的規劃和準備,以面對未知的挑戰。
接著,第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力,但他並沒有因此而放棄,最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難,並相信自己的能力。在生活中,我們或許會面臨各種各樣的挑戰,但只要有毅力堅持,定能克服困難,達成目標。
最後,第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋,最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動,不要草率行事,要有計劃地解決問題,並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中,勤勞、毅力和智慧的重要性。我們需要有遠見,堅持不懈地追求夢想,並願意學習解決問題的方法。這些價值觀將伴隨我們一生,指引著我們走向更加積極、成熟和成功的未來。我相信,《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
比較可惜的是 column-span 的設定只有 all 及 none 兩種,我們無法用 column-span: 2 來表示跨欄的數量,希望在未來有更多的參數可以使用 😛
三隻小豬
《三隻小豬》是一個永不過時的經典童話故事,透過三隻小豬的生活經歷,深刻地啟發我對於生活的思考。每個小豬都代表了不同的價值觀,這些價值觀不僅適用於童話世界,更是指引我們走向成熟與成功的重要道路。
首先,第一隻小豬的懶惰教訓我們不要貪圖安逸。他草率地建造了一個蓬棚,未來面臨大野狼的威脅時,無法守護自己。這告訴我們要有遠見,不要只看眼前的利益,應該有長遠的規劃和準備,以面對未知的挑戰。
接著,第二隻小豬的堅持讓我深受鼓舞。儘管建造木屋較耗時耗力,但他並沒有因此而放棄,最終也能抵擋住大野狼的攻擊。這告訴我們要勇敢地迎接困難,並相信自己的能力。在生活中,我們或許會面臨各種各樣的挑戰,但只要有毅力堅持,定能克服困難,達成目標。
最後,第三隻小豬的智慧和耐心令人敬佩。他用心建造了一座堅固的磚屋,最終成功守護了自己和兄弟。這告訴我們在生活中要謀定而後動,不要草率行事,要有計劃地解決問題,並願意付出時間和努力。而這種智慧和耐心對於我們的成長和發展至關重要。
這個故事讓我深刻體會到在生活中,勤勞、毅力和智慧的重要性。我們需要有遠見,堅持不懈地追求夢想,並願意學習解決問題的方法。這些價值觀將伴隨我們一生,指引著我們走向更加積極、成熟和成功的未來。我相信,《三隻小豬》這個童話故事將永遠在我心中發揮著積極的作用。
以上是網頁關於跨欄的相關設定,有興趣的話可以找篇文章來試作,更多關於 column-* 的編排也可以到 W3School 來查詢。