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

CSS3——瀑布流,多列(Multi-column)

时间:2017-11-10 18:41:43      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:pac   imp   auto   src   lock   order   before   font   sid   

示例——瀑布流

技术分享
<div class="view">
     <div class="item">
         ![](xx)
     </div>
</div>
<style>
    .view{
        column-count: 2; // 设置显示2列
        column-gap: 2px; //设置或检索对象的列与列之间的间隙为2px
        width: 100%;
    }
    .item{
        width: 95%;
        background: #fefefe;
        border: 2px solid #fcfcfc;
        box-shadow: 0px 2px 2px rgba(34, 25, 25, 0.4);
        margin: 5px 2px 2px 2px;
        padding: 1px;
        transition: opacity .4s ease-in-out; // 检索或设置对象变换时的过渡
        display: inline-block;
    }
    .item img{
        width: 100% !important;
        display:block;
    }
</style>
View Code

效果图

技术分享

多列

columns:<‘ column-width ‘> || <‘ column-count ‘>
设置或检索对象的列数和每列的宽度。复合属性

技术分享
/*列数及列宽固定*/
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;

/*列宽固定,根据容器宽度液态分布列数*/
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
View Code

column-width:<length> | auto
设置或检索对象每列的宽度;
auto:根据 <‘ column-count ‘> 自定分配宽度

技术分享
/*列宽固定,根据容器宽度液态分布列数*/
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;
View Code

column-count:<integer> | auto
设置或检索对象的列数;
auto:根据 <‘ column-width ‘> 自定分配宽度

技术分享
/*列数固定,根据容器宽度液态分布列宽*/
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;
View Code

column-gap:<length> | normal
设置或检索对象的列与列之间的间隙

技术分享
/*固定列间隙为40px*/
-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;

/*列间隙column-gap:normal;font-size为14px时,列间隙column-gap:normal的计算值也为14px*/
-moz-column-gap:normal;
-webkit-column-gap:normal;
column-gap:normal;
View Code

column-rule:<‘ column-rule-width ‘> || <‘ column-rule-style ‘> || <‘ column-rule-color ‘>
设置或检索对象的列与列之间的边框。复合属性

技术分享
/*在列与列之间设置绿色间隔线*/
-moz-column-rule:10px solid #090;
-webkit-column-rule:10px solid #090;
column-rule:10px solid #090;
View Code

column-rule-width:<length> | thin | medium | thick
medium:定义默认厚度的边框;
thin:定义比默认厚度细的边框;
thick:定义比默认厚度粗的边框

column-fill:auto | balance
设置或检索对象所有列的高度是否统一;
auto: 列高度自适应内容;
balance: 所有列的高度以其中最高的一列统一

column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置或检索对象之前是否断行;
auto: 既不强迫也不禁止在元素之前断行并产生新列;
always: 总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列

column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置或检索对象之后是否断行

column-break-inside:auto | avoid | avoid-page | avoid-column
设置或检索对象内部是否断行;
auto:既不强迫也不禁止在元素内部断行并产生新列;
avoid:避免在元素内部断行并产生新列

CSS3——瀑布流,多列(Multi-column)

标签:pac   imp   auto   src   lock   order   before   font   sid   

原文地址:http://www.cnblogs.com/ywang/p/7815544.html

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