一、多列布局

CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:

代码如下（具体的解释也在代码中）
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

（图片来源：http://www.runoob.com）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document李波</title>

    <style>

        .div {

            /*控制列数*/

            -moz-column-count: 3;

            /* Firefox */

            -webkit-column-count: 3;

            /* Safari and Chrome */

            column-count: 3;

            /*控制列和列之间的宽*/

            -moz-column-gap: 90px;

            /* Firefox */

            -webkit-column-gap: 90px;

            /* Safari and Chrome */

            column-gap: 90px;

            /*控制列和列之间的线*/

            -webkit-column-rule-style: dashed;

            /* Chrome, Safari, Opera */

            -moz-column-rule-style: dashed;

            /* Firefox */

            column-rule-style: dashed;

            /*控制列和列之间线的宽度*/

            -webkit-column-rule-width: 1px;

            /* Chrome, Safari, Opera */

            -moz-column-rule-width: 1px;

            /* Firefox */

            column-rule-width: 1px;

            /*控制列和列之间线的颜色*/

            -webkit-column-rule-color: green;

            /* Chrome, Safari, Opera */

            -moz-column-rule-color: green;

            /* Firefox */

            column-rule-color: green;

            /*以上的列和列之间线的宽度、颜色、以及性质都可缩写为“column-rule”*/

            -webkit-column-rule: 1px dashed green;

            /* Chrome, Safari, Opera */

            -moz-column-rule: 1px dashed green;

            /* Firefox */

            column-rule: 1px dashed green;

            /*若没有设置列数，就会根据列宽走*/

            -webkit-column-width: 190px;

            /* Chrome, Safari, Opera */

            column-width: 370px;

        }

        .div h1 {

            text-align: center;

            -webkit-column-span: all;

        }

    </style>

</head>

<body>

    <div class="div">

        <h1>我的爱好</h1>

        <h3>第一段内容</h3>

        <p style="color:red">

            <b>注意:</b>( Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。）</p>

        <p>每个人都生活在成长当中，在成长当中也会有更多的梦想，更多的坚持！慢慢凝结成成长的深海。

                我=画画</p>

        <h3>第二段内容</h3>

        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>

        <h3>第三段内容</h3>

        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>

        <h3>第四段内容</h3>

        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>

        <h3>第五段内容</h3>

        <p>画画，这个爱好如此的平凡！却感染着大部分女孩的心！看着笔在手中轻轻挥动，纸上一切都活了！走了起来！一片栩栩如生。在学校的一次美术课上，美术老师展示着别的班同学的画，个个栩栩如生，活灵活现！我羡慕极了！小小的心灵被这些美丽的画惊醒了。让我下定了决心，努力地坚持学习美术，学号美术！让我的手用笔一挥也能描述出这种境界！</p>

    </div>

</body>

</html>

CSS多列布局（栅格布局）的更多相关文章

  1. css两列等高布局

    布局方案 等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...

  2. css两列自适应宽度布局（左定宽，右自适应）

    1.利用BFC: <div id="root"> <div class="left">左</div> <div cla ...

  3. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  4. 你不知道的css各类布局（二）之流体布局、液体布局、栅格布局

    流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...

  5. bootstrap（关于栅格布局）

    栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...

  6. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  7. CSS：谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  8. CSS实现栅格布局

    CSS实现栅格布局 设置容器container: .grid-container { width: 100%; max-width: 1200px; } 清除浮动: .row:before, .row ...

  9. CSS栅格布局

    CSS栅格布局 认识栅格布局 CSS的栅格布局也被称为网格布局(Grid Layout),它是一种新兴的布局方式. 栅格布局是一个二维系统,这意味着它可以同时处理列和行,与弹性布局相似,栅格系统也是由 ...

  10. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

随机推荐

  1. WCF - Hosting WCF Service 四种托管方式

    https://www.tutorialspoint.com/wcf/wcf_hosting_service.htm After creating a WCF service, the next st ...

  2. (转)SQLite部署-无法加载 DLL“SQLite.Interop.dll”: 找不到指定的模块

    本文转载自:http://www.cnblogs.com/muzhiye/p/4284070.html 近期刚使用SQLite,主要引用的是System.Data.SQLite.dll这个dll,在部 ...

  3. laravel使用artisan报错SQLSTATE[42S02]: Base table or view not found: 1146

    说明你在应用初始化阶段使用到了数据库层面的东西,然而当时数据库不存在这个表/字段,所以会报错 需要在初始化比如 config 目录配置中,使用了数据库,在使用前需要添加一层判断,如果不存在 你需要用到 ...

  4. C# Thread2——线程优先级

    C#中Thread的优先级不是决定每个线程被执行顺序.它决定了线程可以占用CPU的时间 Thread的优先级设置是自带的枚举类型"ThreadPriority" [ComVisib ...

  5. Java ——对象 类 方法重载 构造方法 封装 内部类

    本节重点思维导图 快捷键 生成代码:alt+shift+s 提取变量:alt+shift+L 快速复制行:alt+ctrl+向上或向下的箭头 删除行:ctrl+d 类:对同一种事物共同属性和行为的抽象 ...

  6. unity不规则按钮解决方案

    一种是alpha检测 一种是设置collider 参考: https://zhuanlan.zhihu.com/p/34204396 下面给出第二种方案代码 ///按钮多边形点击方案,注意Canvas ...

  7. 前端004/React常用UI组件

    每天进步一点点〜 Ant Design of React //蚂蚁金服设计平台.需要应用何种类型组件可参考API React + mobx + nornj 开发模式文件说明: [1].A.t.html ...

  8. JavaScript文件中; !function (win, undefined) {}(window);的意义

    +function (){}-function (){}!function (){}~function (){}(function (){})() 这种写法可以保证匿名函数立即运行且运行一次 传入的 ...

  9. TCP 和 UDP 的区别---还有一个UTP一

    面试的时候会经常问到这些问题,所以要对比了解一下他们之间的差别,能讲出个所以然来.多积累多总结,懵逼中... TCP 和 UDP TCP与UDP基本区别 : 1.基于连接与无连接 2.TCP要求系统资 ...

  10. Java枚举enum关键字

    枚举的理解 枚举其实就是一个类,枚举类的实例是一组限定的对象 传统的方式创建枚举 [了解] 对比:单例类 1.构造器私有化 2.本类内部创建对象 3.通过public static方法,对外暴露该对象 ...