分栏布局

2020-03-08 12:02:17 阅读：193 来源： 互联网

【逆战班】

所谓分栏，就是将页面的版面划分为若干栏。横排的栏是由上而下垂直划分的，每一栏的宽度相等。效果就像报纸那样。分栏有两种方式，一种是指定分几栏，然后浏览器自动计算出每一栏的宽度；另一种是指定栏的宽度，然后浏览器会根据当前窗口宽度自动计算出分几栏显示。

分栏布局相关属性：

1. column-count : 指定分栏数量

column-count :3; 指当前内容分3栏显示。

2. column-width : 分栏的宽度

column-width :200px; 指每一栏宽度为200像素。

注：column-count和column-width不要同时运用，如果同时运用，则宽度无效。

3. column-gap : 分栏的间距

column-gap :20px; 指各栏之间间距为20像素。

4.column-rule : 分栏的边线（与边框属性相同）

column-rule :1px solid black; 设置宽度为1像素的黑色实线分栏线。

5. column-span : 合并分栏（一般用于标题）

column-span :all; 合并所有栏。

6例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

    #box{ 

        width:500px; /*设置容器宽度*/

        border:1px aqua solid;

        margin:20px auto;

        column-count: 3; /*设置内容分3栏显示*/

        column-gap:15px; /*分栏间距为15像素*/

        column-rule:1px aqua dashed; /*设置分栏间隔线*/

        text-indent: 2em; /*首行缩进2字符*/

    }

    #box h1{

        column-span:all; /*合并所有栏*/

        text-align: center; 

        font-size: 22px;

    }

    </style>

</head>

<body>

    <div id="box">

        <h1>任花开落似流年，开到刻骨化为沉淀</h1>

        

        <p>彼岸残花，片片落花情，花开似水似流年。无言的殇，誓言不再回，花残人悴，没了烟雨红尘。一世安宁，逃不过指尖流沙，一指烟凉，经不起流年似水。

            花开花落繁花入梦，流年无情入星河……</p>

 

        <p>儿时仰望星空的繁星，数着庭间花开的花瓣，无言风月，安详梦日。搁浅了岁月道不尽的哀伤，弹指流年佛歌尘散。丝丝柔情花落，怕了三千青丝一朝白，

            我们等不来岁月带来的柔情，是花落间，那眼角的泪。紫陌红尘的浮华沉醉中，蓦然回首，那如花的容颜，似海的柔情，在范黄的流年间，模糊成画。在琴音下揉成一个个愁结，无由得饮在前世的花开间。</p>

            

        <p>蘸一抹沧桑，花落了一季的忧伤，在笔尖纸上数着细水流年。多少泪飞扬 庭间花开又落了一地，什么一场岁月一人生，什么花落似流年的残。一杯浊酒，

            多少世间情，倾尽一生温柔暖了花开岁月，庭间舞动一地花落。风残，花也残了，流水落花春去也。绕在指间的情愫，一身的眷恋，在花开花落间逝去的年华，携着暖阳淡了，暖了……</p>

            

        <p>镌刻心间的花开，轻触了岁月朦胧的情。</p>

            

        <p>沉淀星空的岁月，轻刻了骨子柔情的暖。</p>

            

        <p>花的一生 亦如人生，花开一间 ，花落一下 ，挥手一间。流年似水染尽了斑白，花开庭间，一梦两生，缠绵入骨相思知不知。静听那涓涓流水，

            那清风伴着花落，细水长流，在骨子里安好。</p>

            

        <p>所以……</p>

            

        <p>任花开落似流年，开到刻骨化为沉淀</p>

    </div>

</body>

</html>

7.效果图

标签：width,column,布局,花落,花开,宽度,分栏
来源： https://www.cnblogs.com/icy-shower/p/12441655.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

分栏布局