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%;
  }

 

• 瀑布流照片（）