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- 100px;
- 固定每列的宽度 无法显示的列,将换到下一行显示,形成自适应
- 多列新闻(一个 <div id="imgs"> 包含很多 <img>)
-
#imgs { column-width: 300px; column-gap: 10px; } #imgs img { display: block; width: 100%; }
- 瀑布流照片()