多列布局--瀑布流原理

2018/08/06 23:27
阅读数 11

多列布局

      CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样

  1. 常用属性:

a)      column-count: 属性设置列的具体个数

b)     column-width: 属性控制列的宽度

c)      column-gap: 两列之间的缝隙间隔

d)     column-rule: 规定列之间的宽度、样式和颜色

e)      column-span: 规定元素应横跨多少列(n:指定跨n列  all:跨所有列)

  1. 多列的用法:
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .wrapper{
        width:1054px;
        padding:20px;
        margin:0 auto;
        font-family: "微软雅黑",Arial;
        /*设置以几列的方式显示*/
        column-count:2;
        /*指定列宽*/
        column-width:500px;
        /*指定列与列之间的间距*/
        column-gap: 50px;
        /*指定列与列之间间隙的样式*/
        /*column-rule:2px dotted red*/
        /*相对应下面的三个属性*/
        column-rule-color:red;
        column-rule-style:dotted;
        column-rule-width:2px;
    }
    .wrapper > h4{
        column-span: all;
    }
</style>

 

  1. 列高度的平衡:

如果设定列的最大高度,这个时候,文本内容会从第一列开始填充,然后第二列,第三列

max-height: 300px;

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部