一、多列布局

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. Visual Studio2015 community 许可证到期问题

    申请微软账户直接登录可以继续使用.

  2. C#配置IIS站点

    一.源码特点       1.  一些基于ASP.NET应用产品,在用户环境中都无可避免的涉及到部署到目标环境的应用服务器上,而配置站点是此过程的核心步骤,此源码对过程进行了高度封装,从创建IIS所需 ...

  3. React-Native 之 GD （十）Android启动页面 及 模态方式跳转

    1.Android启动页面 思路:新建一个组件作为 Android 的启动页,index.android.js 的初始化窗口改为 Android启动页,设置定时器,使其在1.5秒后自动跳转到 Main ...

  4. UEFI手札

    基于Intel TianoCore衍生的EDK-II诞生的UEFI,用来取代Legacy BIOS. INF文件 Module Information File,模块描述文件.Module可以是可执行 ...

  5. Week6 - 676.Implement Magic Dictionary

    Week6 - 676.Implement Magic Dictionary Implement a magic directory with buildDict, and search method ...

  6. KETTLE——（例）简单的字段转换

    一个简单的小例子:结合数据抽取.简单的字段转换.数据输出. 资源库连接.数据输入.数据输出.参见之前的文章. ​ 基本的转换结构是这样的,我们从表中输入,选择我们需要的字段,已经对应的名称,然后将数据 ...

  7. 一个有关Golang Deferred Function 执行顺序的问题

    先看一下一段关于defer的解释, 引自<Go程序设计语言> Syntactically, a defer statement is an ordinary function or met ...

  8. NanUI

    https://github.com/NetDimension/NanUI/wiki/%E4%B8%AD%E6%96%87%E8%AF%B4%E6%98%8E NanUI基于ChromiumFX项目进 ...

  9. centos 7 lnmp环境编译安装zabbix-3.4.14

    一.安装环境(zabbix3.0需要php在5.5版本以上) [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Cor ...

  10. ubuntu 上用virtualenv安装python不同版本的开发环境。

    1.用pip安装virtualenv apt-get install python-virtualenv 2.创建python2的虚拟环境,进入要创建虚拟环境的目录下,我是放在/home/pyenv/ ...