zoukankan      html  css  js  c++  java
  • css3学习 理论之多列布局

    例子:columns: 250px 3;250px表示的是列宽,3表示的是多列的数目。

    也可以只指定列宽,column-300px;-moz-column-300px;-webkit-column-300px; 网页中每个栏目的最大宽度为300像素;根据窗口宽度自动调整几栏显示。

    同样可以只指定列数,column-count:3;-moz-column-count:3;-webkit-column-count:3; 根据窗口宽度自动调整列宽。

    column-gap,列间距,column-gap:3em;-moz-column-gap:3em;-webkit-column-gap:3em; 定义列间距为3em,默认为1em。

    column-rule,列边框样式,例如:column-rule:dashed 2px gray;-moz-column-rule:dashed 2px gray;-webkit-column-rule:dashed 2px gray;定义列边框为2像素宽的灰色虚线。column-rule:solid 5px blue;-moz-column-rule:solid 5px blue;-webkit-column-rule:solid 5px blue;定义列边框为5像素宽的蓝色实线。

    column-span,定义跨列显示,取值只能是1或者all,当是1 的时候,就意味着只在本栏显示,而取all的时候,将横跨所有列,并定位在列的Z轴之上。column-span:all;-moz-column-span:all;-webkit-column-span:all; 

    column-fill,定义栏目高度是否统一,取值只能是auto或者balance,设置auto时,各列的高度随其内容的变化而自动变化。设置为balance时,高度统一。

    学习学习。。O(∩_∩)O~

  • 相关阅读:
    第一次个人编程作业
    第一次博客作业
    学习C#字符串中的String类和String Builder类
    第一节:泛型在单例游戏基类中的简单运用
    Alpha 冲刺 (6/10
    Alpha 冲刺 (5/10)
    Alpha 冲刺 (4/10)
    福大软工1816 · 团队现场编程实战(抽奖系统)
    Alpha 冲刺 (3/10)
    Alpha 冲刺 (2/10)
  • 原文地址:https://www.cnblogs.com/xiaobudiandian/p/2291713.html
Copyright © 2011-2022 走看看