前端优
我用我的双手去成就我的梦想,我将遵循此道直至终结!
首页 > html+css >正文

多栏布局column

发布时间:2024-09-06 09:42 作者:一友画

分栏显示--语法: column-count:值

多栏隔断框--语法: column-rule:值


  • a)分一栏

    案例1代码示例:

    <style type="text/css">
    div{width: 100%;column-count: 1;}
    </style>
    <div>时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。</div>
    
    案例1
    时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。


  • b)分两栏

    案例2代码示例:

    <style type="text/css">
    div{width: 100%;column-count: 2;column-rule:2px solid #f00;}
    </style>
    <div>时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。</div>
    
    案例2
    时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。


  • c)分三栏

    案例3代码示例:

    <style type="text/css">
    div{width: 100%;column-count: 3;column-rule:2px solid #f00;}
    </style>
    <div>时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。</div>
    
    案例3
    时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。


  • d)分四栏

    案例4代码示例:

    <style type="text/css">
    div{width: 100%;column-count: 4;column-rule:2px solid #f00;}
    </style>
    <div>时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。</div>
    
    案例4
    时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。


  • e)分五栏

    案例5代码示例:

    <style type="text/css">
    div{width: 100%;column-count: 5;column-rule:2px solid #f00;}
    </style>
    <div>时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。</div>
    
    案例5
    时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。


设置每一栏的宽度--语法: column-width:值

  • 案例代码示例:

    <style type="text/css">
    div{column-width: 100px;column-rule:2px solid #f00;}
    </style>
    <div>时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。</div>
    
    案例
    时间,在挥汗洒泪、砥励意志的拼搏中。梦回那些尘埃落定的日子,自始至终,刻在脑海、印在心门的是闪光的努力。可否记得,残阳抹去最后一丝血迹时仍在土坡的感慨高歌,直至暮霭吞噬、黑色的眼睛望不到昏黄的光;可否记得,大雨滂沱、路面汇而成河,仍在流落寻找那消失在阑珊深处的人影;可否记得,夜深人不知、柴门犬偶吠时那抹杀一切睡意的灯,灯下是伏案人在提笔而作。时间,就在这样的努力、这样的寻找、这样的拼搏中,点汗成金。

以上内容,在整理时难免有疏漏错误之处,如有发现,可以通过顶部的“联系站长”提出反馈,感谢您的支持!