CSS3 Columns

簡介

我們在報紙或雜誌上時常看到直欄的排版方式，這是因為當文字列過長，在讀到列尾時，眼睛要回頭找下一列文字的開頭並不容易；因此，將長列的文字以直欄的方式排列，縮短列寬，閱讀起來就輕鬆多了。CSS3 有一組相關的屬性專門用在直欄的排版，但時至今日 (2016-05-22) 各大流覽器的支援尚未一致，行為模式也略有不同，使用時需多加留意。Chrome 及 Safari 在屬性前需加前綴 -webkit-，Firefox 在屬性前需加 -mz-，至於 IE，直到 IE10 才有原生支援，使用時無須加前綴。

各直欄屬性的定義如下：

column-count: 預設值為 auto，直欄個數由其它屬性 (column-width) 決定。賦予值為整數值，指定直欄個數。
column-width: 預設值為 auto，直欄個數由其它屬性 (column-count) 決定。賦予值為 CSS3 的長度值，指定直欄的最小寬度。通常直欄的寬度會略大於 column-width 指定的寬度，因為流覽器是這麼處理的：將 "父元件的寬度" 除以 column-width 的值，所得商數即是直欄的個數，餘下的長度又會平均分配給各直欄。所以除非正好整除，否則直欄的寬度都會略大於 column-width 的指定值。
columns: 為 column-count 和 column-width 的組合式簡寫。寫法為 columns: column-count column-width; 。這是最佳的定義方式，同時設定 column-count 及 column-width，讓視窗在改變大小時，直欄也可以相應改變其欄位數。
column-gap: 設定直欄間的間隔寬度。預設值為 normal (1em)，或直接賦予一個寬度值。
column-rule-width: 設定直欄分隔線的寬度。有三個字串值：thin (1px), medium (3px), thick (5px)，預設值為 "medium"，或直接賦予一個寬度值。
column-rule-style: 設定直欄分隔線的樣式。預設值為 none，就是沒有直欄分隔線。其它的樣式允許值和 border 的樣式允計值相同。
column-rule-color: 設定直欄分隔線的顏色。預設值為 initial，通常就是黑色。
column-rule: column-rule: column-rule-width column-rule-style column-rule-color; 此為同時設定 column-rule-width, column-rule-style 及 column-rule-color 的簡式寫法；語法就像設定邊框 (border) 時的簡式寫一樣。
column-span: 設定元件所要橫跨的欄數，預設值為 1。
column-fill: 設定直欄中元件的排版方式，預設值為 balance，表示平均分配所有元件，盡可能讓所有直欄具有相同高度。

範例

範例中有一幀圖片及一段文字，用來展示如何使用 CSS3 的 column-* 屬性。當流覽器改變尺寸時，所顯示的內容也會跟著重新調整版面，當畫面縮小時，排版會從 3 直欄變成 2 直欄，最後變成一直欄。範例中將 body 的寬度設為 1000px，減去 .newspaper 左右各 20px 的 padding，正好留下 960px 的內容寬度。

CSS

<style>
html {
    width: 100%;
    height: 100%; 
}
body {
    margin: 0 auto;
    max-width: 1000px;
    background-color: #FFFFFF;  
    font-family: 'Arial', '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei';
    font-style: normal;
    font-weight: 100;
    font-stretch: normal;
    font-size: 16px;
    line-height:1.7;
    letter-spacing: 0.087em;
}
.newspaper {
    padding: 0px 20px;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-width: 300px;
    -moz-column-width: 300px;
    column-width: 300px;
    /*-webkit-column-gap: 20px; */
    /*-moz-column-gap: 20px;*/
    /*column-gap: 20px;*/
    -webkit-column-rule: 1px solid gray;
    -moz-column-rule: 1px solid gray;
    column-rule: 1px solid gray;
}
.newsItem {
    margin: 0 10px;
    /*-webkit-column-break-inside: avoid;*/ /* Chrome, Safari */
    /*page-break-inside: avoid;*/           /* Theoretically FF 20+ */
    /*break-inside: avoid-column; */        /* IE 11, Opera */
    border-bottom: 1px solid gray;
}
.photo {
    width: 100%;
    height:auto;
    cursor: pointer;
}
</style>

.newspaper{} 設定了整個直欄的版面，當有足夠空間時，會排成 3 個直欄，每個直欄最小需 300px 的寬度。
.newsItem{} 設定在右 margin 為 10px，如果把註解的部份拿掉，則整個 .newsItem 會保持在同一直欄中。
.photo{} 設定圖片的寬度正好為直欄的寬度，高度則自動調整，以保持寬和高的比率。

HTML

<body>
    
        
            摩訶般若波羅蜜多心經
            
            觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。是故空中無色。無受想行識。無眼耳鼻舌身意。無色身香味觸法。無眼界。乃至無意識界。無無明。亦無無明盡。乃至無老死。亦無老死盡。無苦集滅道。無智。亦無得。以無所得故。菩提薩埵。依般若波羅蜜多故。心無罣礙。無罣礙故。無有恐怖。遠離顛倒夢想。究竟涅槃。三世諸佛依波若波羅蜜多故。得阿藐多羅三藐三菩提。故知般若波羅蜜多咒。是大神咒。是大明咒。是無上咒。是無等等咒。能除一切苦。真實不虛。故說般若波羅蜜多咒。即說咒曰。揭諦揭諦。波羅揭諦。波羅僧揭諦。菩提薩婆訶。
        
    
</body>

HTML 中將所有的元件包覆在 .newItem 的區塊中，每個區塊則包含一個抬頭、一幀圖片及一段內容。新增的 .newsItem 都會直動以直欄的方式排列。

熊伯的外接硬碟

2016年5月23日星期一

CSS3 Columns

CSS3 Columns

簡介

範例

CSS

HTML

摩訶般若波羅蜜多心經

沒有留言:

張貼留言

2016年5月23日 星期一

CSS3 Columns

CSS

HTML

摩訶般若波羅蜜多心經

沒有留言:

張貼留言

2016年5月23日星期一