码迷,mamicode.com
首页 > Web开发 > 详细

CSS3_多列布局

时间:2018-11-10 18:03:36      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:分割   布局   CSS3 多列布局   多列   瀑布流   live   code   新闻   默认   

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

 

  • 瀑布流照片()

 

 

 

 

 

CSS3_多列布局

标签:分割   布局   CSS3 多列布局   多列   瀑布流   live   code   新闻   默认   

原文地址:https://www.cnblogs.com/tianxiaxuange/p/9939797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!