CSS3中提供的新屬性columns,是用于多列布局的。
在這之前,有些大家習以為常的排版,要用CSS動態實現其實是比較困難的。如下方的排版,類似于報紙排版:
在不知columns屬性之前,這種效果想想確實很難實現,因為內容是動態的。搞div容易,但每個div內放多少文字呢?一篇文章該在哪行哪段剪切進不同的div內呢?你肯定不愿意為每一段文字,都在特定的地方插入div標簽,簡直要瘋了。而使用columns它可以讓瀏覽器確定何處結束一列和開始下一列,簡單的說,就是CSS3多列布局可以自動將內容按指定的列數排列。多列布局的主要屬性有:
column-width: 類似于給列定義一個最小寬度
column-count: 指定想要的列數或者說是最大列數
column-gap: 定義列間距,相當于margin屬性
column-rule: 定義列邊框,相當于border,不過它不占任何空間
column-span: 定義多列布局中子元素的跨列效果
column-fill: 控制每列的列高應該是一樣的還是自適應的,瀏覽器支持情況較差。不建議使用
屬性的詳細介紹:
column-width給列定義個最小的寬度。默認值為auto表示將根據column-count列的數量自動調整列寬。
column-count最大列數,不贅述。
通常上面兩個參數都合并在columns中一起指定。
column-gap是列間距,默認值normal,相當于1em。需要注意的是,如果column-gap與column-width加起來大于總寬度的話,就無法顯示column-count指定的列數,會被瀏覽器自動調整列數和列寬
column-rule用于設置列的邊框,類似于border,區別是不占用任何空間,因此設了column-rule不會導致列寬的變化。另外如果邊框寬度大于column-gap列間距,將不會顯示邊框。語法和border類似,例如column-rule: 1px solid #000;。效果見例子頁面。
column-span用于跨列,默認值none表示不跨列,all表示跨越所有列。例如文章標題可以設成all來跨列。效果見例子頁面
column-fill用于統一列高。默認值auto各列的高度隨內容自動調整,balance所有列高都設為最高的列高;
下面上一段代碼,實現的效果如下:
HTML架構如下
scc的設置如下:
多列布局先介紹到這里,如果對您有所幫助的話,請點贊并關注哦,我會不定時的更新一下自己學習的經驗以及見解,和大家進行交流。
您贊就是是我最大的動力!!!