CSS3_多列布局

CSS3 多列布局

能夠隨屏幕大小自適應佈局

可以建立多個列對文本進行佈局

 

• 屬性
• column-count: 5;
  • 將文本分紅 5 列    注意： 用戶的屏幕大小
• column-fill: balance / auto;
  • 規定如何填充列   
  • 默認值 balance ，無論 height 設置多少，列始終均等分佈
  • auto    當設置了 height 時，內容會到達高度後纔會換列
• colum-gap: 10px;
  • 列與列之間的距離
• column-rule: 2px solid olive;   
  • 分割線的： 顏色    樣式    寬度
• column-span: 1 / all;   
  • 設置元素佔據的列數    只有兩個可選值 1 / all    一般給標題設置
• column-width: 100px;   
  • 固定每列的寬度    沒法顯示的列，將換到下一行顯示，造成自適應

 

• 多列新聞（一個 <div id="imgs"> 包含不少 <img>）

• #imgs {
      column-width: 300px;
      column-gap: 10px;
  }
  
  #imgs img {
      display: block;
      width: 100%;
  }

 

• 瀑布流照片（）