zoukankan      html  css  js  c++  java
  • css3学习笔记之多列

    CSS3 创建多列

    column-count 属性指定了需要分割的列数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html>
    <head>
    <style
    .newspaper
    {
     
    -webkit-column-count:6; /* Safari and Chrome */
     
    }
    </style>
    </head>
    <body>
     
    <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
     
    <div class="newspaper">
    “当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”
    </div>
     
    </body>
    </html>

    CSS3 多列中列与列间的间隙

    column-gap 属性指定了列与列间的间隙。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!DOCTYPE html>
    <html>
    <head>
    <style
    .newspaper
    {
    -webkit-column-count:3; /* Safari and Chrome */
    -webkit-column-gap:40px; /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
     
    <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
     
    <div class="newspaper">
    当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
     
    </div>
     
    </body>
    </html>

    CSS3 列边框

    column-rule-style 属性指定了列与列间的边框样式:

    column-rule-width 属性指定了两列的边框厚度:

    column-rule-color 属性指定了两列的边框颜色:

    column-rule 属性是 column-rule-* 所有属性的简写。(可以直接用这个,看例子)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html>
    <head>
    <style
    .newspaper
    {
    -webkit-column-count:3;
    -webkit-column-gap:40px; 
    -webkit-column-rule:10px dotted red;
    /*3个参数分别代表边框的厚度、样式以及颜色*/
    /*solid 实线 dotted虚线*/
     
    }
    </style>
    </head>
    <body>
     
    <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
     
    <div class="newspaper">
    当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
    </div>
     
    </body>
    </html>

    指定元素跨越多少列

    column-span:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    <head>
    <style
    .newspaper
    {
    -webkit-column-count:3; /* Safari and Chrome */
     
    }
    h2
    {
    -webkit-column-span:all; /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
     
    <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
     
    <div class="newspaper">
    <h2>英国维斯米斯特教堂碑文</h2>
    当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
    </div>
     
    </body>
    </html>

    指定列的宽度

    column-width 属性指定了列的宽度。

    (不用分多少列,这个自动根据宽度分列)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html>
    <head>
    <style
    .newspaper
    {
    -webkit-column-100px; /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
     
    <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>
     
    <div class="newspaper">
    当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。
    </div>
     
    </body>
    </html>

    CSS3 多列属性

    下表列出了所有 CSS3 的多列属性:

    属性描述
    column-count 指定元素应该被分割的列数。
    column-fill 指定如何填充列
    column-gap 指定列与列之间的间隙
    column-rule 所有 column-rule-* 属性的简写
    column-rule-color 指定两列间边框的颜色
    column-rule-style 指定两列间边框的样式
    column-rule-width 指定两列间边框的厚度
    column-span 指定元素要跨越多少列
    column-width 指定列的宽度
    columns 设置 column-width 和 column-count 的简写

  • 相关阅读:
    【BZOJ1294】围豆豆(SCOI2009)-状压+BFS
    【BZOJ3244】树的计数(NOI2013)-概率期望+数学证明
    【BZOJ4826】影魔(AHOI&HNOI2017)-线段树+离线
    【BZOJ3832】Rally(POI2014)-拓扑排序+最长路+堆
    【BZOJ4556】字符串(TJOI&HEOI2016)-后缀数组+二分+RMQ+主席树
    【BZOJ1029】建筑抢修(JSOI2007)-贪心+堆
    【BZOJ1057】棋盘制作(ZJOI2007)-DP+悬线法
    【BZOJ1025】游戏(SCOI2009)-数论+背包DP
    java日期操作
    list类型for遍历
  • 原文地址:https://www.cnblogs.com/aiyoubucuoo/p/5437516.html
Copyright © 2011-2022 走看看