CSS3多栏布局
　　分栏数：

　　　　column-count：auto|num；

　　　　auto为默认值，表示元素只有一列。num取值为大于0的整数
　　每栏宽度：

　　　　column-width:auto|<length>;
　　　　eg:综合写法:columns:<column-width>||<column-count>
　　多栏之间间隔：

　　　　column-gap:normal||<length>; n

　　　　ormal:默认值，默认值为1em（如果你的字号是px,其默认值为你的font-size值），

　　　　<length>:不能为负值，可以使用px,em单位的任何整数值
　　设置多栏之间分隔线：

　　　　column-rule:1px solid red;

　　　　这个的写法和border的综合写法相同，都是一个宽度，一个类型，一个颜色
　　跨列设置：column-span:all | none;

　　　　none:默认值，表示不跨越任何列

　　　　all:跟none相反，表示是元素跨越所有列，并定位在列的z轴之上。

以下是一个简单的例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>分栏</title>

    <style>

        .div{

            width: 700px;

            height: 500px;

            border: 1px solid red;

            /*分栏数*/

            column-count: 3;

            /*分栏间隔线*/

            column-rule:1px solid red;

            /*多栏之间的间隔*/

            column-gap: 20px;

            /*每个栏的宽度*/

            column-width: 200px;

        }

        /*分栏跨列*/

        .span{

            text-align: center;

            font-size: 36px;

            column-span: all;

        }

    </style>

</head>

<body>

<div class="div">

    <div class="span">陈粒</div>

    陈粒首次“触电”，此次为电影《外公芳龄38》演唱主题曲的陈粒是首次“触电“，并且同好友好妹妹乐队实力合作，这首魔性减压曲《38号大迪曲》被粉丝封为“酒仙桥三姝”，感叹终于出道。这首歌由陈粒亲自作词作曲，并加入之前歌曲中从未尝试过的电音元素，节奏活泼唱腔欢快，同喜剧电影《外公芳龄38》轻松愉悦的气质完美融合。而好妹妹乐队曾为《唐人街探案》《横冲直撞好莱坞》《小门神》《六弄咖啡馆》等多部热门电影演唱主题曲，这次作为“老司机“为《外公芳龄38》演唱主题曲可谓轻车熟路，两个人自由不羁的风格为歌曲增色不少。38号大迪曲》也是好妹妹乐队和陈粒首次正式合唱的歌曲，好妹妹乐队在刚刚结束的十一届金鹰节颁奖晚会以及上个月的湖南电视台中秋晚会上获得双料收视王，近来也逐渐走进大众视线、在热门话题上经常见的陈粒，民谣界的两组人气王终于强势合作，献出年度魔性减压曲。陈粒创作的充满才气却又朗朗上口的歌曲， 带有陈粒一贯的个性与特色、好妹妹乐队的热情与开朗，粉丝纷纷表示“听完歌腰也不酸了，腿也不疼了，七楼也一口气可以上了“。更有粉丝戏称陈粒”写出了50年后的广场舞舞曲“， 听着歌就要到舞池中央去了，还有粉丝求广场舞动作教学视频，洗脑减压效果一流。

</div>

</body>

</html>

CSS3多栏布局的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  2. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  3. css3 -&gt; 多栏布局

    在进行多栏布局时.使用bootstrap的栅格系统能够非常轻松的实现效果,事实上css3本身也提供了多兰布局的功能. 比方,我们在一个section标签内填充了非常多内容.同一时候希望内容可以显示成三 ...

  4. CSS3使用盒模型实现三栏布局

    本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏 ...

  5. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

  7. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  8. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  9. CSS3与页面布局学习笔记（一）——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

随机推荐

  1. Python分析最近大火的网剧《隐秘的角落》，看看网友们有什么看法

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 估计最近很火的连续剧<隐秘的角落>大家趁着端午假期都看过了吧? ...

  2. 117.填充每个节点的下一个右侧节点指针II

    # Definition for a Node.class Node: def __init__(self, val: int = 0, left: 'Node' = None, right: 'No ...

  3. 看完这篇Redis缓存三大问题，保你面试能造火箭，工作能拧螺丝。

    前言 日常的开发中,无不都是使用数据库来进行数据的存储,由于一般的系统任务中通常不会存在高并发的情况,所以这样看起来并没有什么问题. 一旦涉及大数据量的需求,如一些商品抢购的情景,或者主页访问量瞬间较 ...

  4. redis-cli连接redis服务器操作

    安装redis-cli 命令:redis-cli -h 地址 -p 端口号 认证:auth 密码 选择对应的DB:Select DB号(0~15) 查看对应的Key的过期时间:TTL Key名称 查看 ...

  5. 内存疯狂换页！CPU怒批操作系统

    内存访问瓶颈 我是CPU一号车间的阿Q,前一阵子我们厂里发生了一件大喜事,老板拉到了一笔投资,准备扩大生产规模. 不过老板挺抠门的,拉到了投资也不给我们涨点工资,就知道让我们拼命干活,压榨我们的劳动力 ...

  6. 赋值,逻辑,运算符, 控制流程之if 判断

    赋值运算 (1). 增量运算 age += 1 # age = age + 1 print(age) age -= 10 # age = age - 10 (2).交叉赋值 x = 111 y = 2 ...

  7. python实现二维码、条形码识别

    环境: python 3.7 Win7 依赖包安装: pip install pillow pip install opencv-python pip install opencv-contrib-p ...

  8. YAML 语言教程与使用案例

    YAML语言教程与使用案例,如何编与读懂写YAML文件. YAML概要 YAML 是 “YAML Ain’t a Markup Language”(YAML 不是一种标记语言)的递归缩写.在开发的这种 ...

  9. JavaScript学习 Ⅰ

    一. JavaScript的使用 <script>标签 在HTML中,JavaScript代码必须位于<script>与</script>标签之间. 实例: < ...

  10. JVM 学习笔记（五）

    前言: 前面的文件介绍了JVM的内存模型以及各个区域存放了那些内容,本编文章将介绍JVM中的垃圾回收Garbage Collector,和大家一起探讨一下. 如何确定一个对象是垃圾: 这里介绍两种方法 ...