HTML常使用的布局方法——多列布局

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的設置如下:

多列布局先介紹到這里,如果對您有所幫助的話,請點贊并關注哦,我會不定時的更新一下自己學習的經驗以及見解,和大家進行交流。

您贊就是是我最大的動力!!!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 淺談CSS3多列布局 相信大家都看過報紙,報紙上的內容大多數都是分欄顯示的,如下圖所示: 現在,強大的CSS3為我...
    haileym閱讀 2,304評論 0 0
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,805評論 0 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,338評論 0 11
  • CSS3提供了個新屬性columns用于多列布局。在這之前,有些大家習以為常的排版,要用CSS動態實現其實是比較困...
    張歆琳閱讀 5,201評論 2 6
  • 他們太擔心來世了,以至于都沒學會怎樣在這個世界上生活。 ——《殺死一只知更鳥》 CSS3新增了多列布局特性,它可以...
    BIGHAI閱讀 444評論 0 0