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

• 瀑布流照片（）