zoukankan      html  css  js  c++  java
  • CSS3多列Multi-column布局

    Properties
    属性
    CSS Version
    版本
    Inherit From Parent
    继承性
    Description
    简介
    columns css3 设置或检索对象的列数和每列的宽度。复合属性
    column-width CSS3 设置或检索对象每列的宽度
    column-count CSS3 设置或检索对象的列数
    column-gap CSS3 设置或检索对象的列与列之间的间隙
    column-rule CSS3 设置或检索对象的列与列之间的边框。复合属性
    column-rule-width CSS3 设置或检索对象的列与列之间的边框厚度。
    column-rule-style CSS3 设置或检索对象的列与列之间的边框样式。
    column-rule-color CSS3 设置或检索对象的列与列之间的边框颜色。
    column-span CSS3 设置或检索对象元素是否横跨所有列。
    column-fill CSS3 设置或检索对象所有列的高度是否统一。
    column-break-before CSS3 设置或检索对象之前是否断行。
    column-break-after CSS3 设置或检索对象之前是否断行。
    column-break-inside CSS3 设置或检索对象内部是否断行。

    columns

    设置或检索对象的列数和每列的宽度。复合属性·

    columns:[ column-width ] || [ column-count ]

    .test{
    628px;
    border:10px solid #000;
    -moz-columns:200px 3;
    -webkit-columns:200px 3;
    columns:200px 3;
    }
    .test2{
    border:10px solid #000;
    -moz-columns:200px;
    -webkit-columns:200px;
    columns:200px;
    }

    column-width

     设置或检索对象每列的宽度

    .test{
    628px;
    border:10px solid #000;
    -moz-column-200px;
    -moz-column-count:3;
    -webkit-column-200px;
    -webkit-column-count:3;
    column-200px;
    column-count:3;
    }
    .test2{
    border:10px solid #000;
    -moz-column-200px;
    -webkit-column-200px;
    column-200px;
    }
    .test3{
    border:10px solid #000;
    -moz-column-count:5;
    -webkit-column-count:5;
    column-count:5;
    }

    column-count

    设置或检索对象的列数

    column-count:<integer> | auto

    • <integer>:用整数值来定义列数。不允许负值
    • auto:根据column-width自定分配宽度

    column-gap

    设置或检索对象的列与列之间的间隙

    column-gap:<length> | normal

    • <length>:用长度值来定义列与列之间的间隙。不允许负值
    • normal:与font-size大小相同。假设该对象的font-size为16px,则normal值为16px,类推。

     column-rule

    设置或检索对象的列与列之间的边框。复合属性。

    column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]

    • [ column-rule-width ]:设置或检索对象的列与列之间的边框厚度。
    • [ column-rule-style ]:设置或检索对象的列与列之间的边框样式。
    • [ column-rule-color ]:设置或检索对象的列与列之间的边框颜色。

    .test{
    border:10px solid #000;
    -moz-column-count:3;
    -moz-column-gap:20px;
    -moz-column-rule:10px solid #090;
    -webkit-column-count:3;
    -webkit-column-gap:20px;
    -webkit-column-rule:10px solid #090;
    column-count:3;
    column-gap:20px;
    column-rule:10px solid #090;
    }

    设置或检索对象的列与列之间的边框厚度。

    column-rule-width:<length> | thin | medium | thick

    • <length>:用长度值来定义边框的厚度。不允许负值
    • medium:定义默认厚度的边框。
    • thin:定义比默认厚度细的边框。
    • thick:定义比默认厚度粗的边框。

    设置或检索对象的列与列之间的边框样式。

    column-rule-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

    • none:无轮廓。column-rule-color与column-rule-width将被忽略
    • hidden:隐藏边框。
    • dotted:点状轮廓。
    • dashed:虚线轮廓。
    • solid:实线轮廓
    • double:双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值
    • groove:3D凹槽轮廓。
    • ridge:3D凸槽轮廓。
    • inset:3D凹边轮廓。
    • outset:3D凸边轮廓。

    column-rule-color:<color>

    设置或检索对象元素是否横跨所有列。

    column-span:none | all

    • none:不跨列
    • all:横跨所有列

    .test{
    600px;
    border:10px solid #000;
    -moz-column-count:3;
    -moz-column-gap:20px;
    -moz-column-rule:3px solid #090;
    -webkit-column-count:3;
    -webkit-column-gap:20px;
    -webkit-column-rule:3px solid #090;
    column-count:3;
    column-gap:20px;
    column-rule:3px solid #090;
    }
    .test p{
    -moz-column-span:all;
    -webkit-column-span:all;
    column-span:all;
    }

  • 相关阅读:
    夜空中最亮的星
    让我留在你身边
    反思
    又想起民谣那诗
    初学积性函数
    P1049 装箱问题(01背包)
    set
    紫书 习题 10-4 UVa 1644(素数筛)
    紫书 习题 10-2 UVa 808(建立坐标+找规律)
    紫书 习题 10-1UVa 111040(找规律)
  • 原文地址:https://www.cnblogs.com/horanly/p/6644098.html
Copyright © 2011-2022 走看看