一、多列布局

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. 转 opencv红绿灯检测

    整个项目源码:GitHub 引言 前面我们讲完交通标志的识别,现在我们开始尝试来实现交通信号灯的识别 接下来我们将按照自己的思路来实现并完善整个Project. 在这个项目中,我们使用HSV色彩空间来 ...

  2. SpringBoot：运行原理探究

    西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! SpringBoot ...

  3. p2619 [国家集训队2]Tree I [wqs二分学习]

    分析 https://www.cnblogs.com/CreeperLKF/p/9045491.html 反正这个博客看起来很nb就对了 但是不知道他在说啥 实际上wqs二分就是原来的值dp[x]表示 ...

  4. python安装使用（windows）

    安装 参考:http://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/install.html#scrapy 用到的文件:https://share.weiy ...

  5. python twisted异步将数据导入到数据库中

    from twisted.enterprise import adbapi from twisted.internet import reactor def creat_conn(): # 数据库基本 ...

  6. 20160711--C# 委托的三种调用示例（同步调用 异步调用 异步回调）【转载】

    首先,通过代码定义一个委托和下面三个示例将要调用的方法: 代码如下: public delegate int AddHandler(int a,int b); public class 加法类 { p ...

  7. 002-localStorage和sessionStorage操作

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 一直存在除非用户手动清除缓存;是基于域的,任何该域下的所有页面都可访问localSto ...

  8. 神器 工具 推荐 SRDebugger

    unity asset store 关联下载 ,添加这个书签  javascript:var url = window.location.href;var id = url.substr(url.la ...

  9. json-server-----》基本使用

    [WangQi]---json-server---基本使用   一.前后端并行开发的痛点 前端需要等待后端开发完接口以后 再根据接口来完成前端的业务逻辑 二.解决方法 在本地模拟后端接口用来测试前端效 ...

  10. Java-XML解析第一篇主流开源类库解析XML

    1.流行的XML解析框架 1>底层解析方式:存在编码复杂性.难扩展.难复用.....想了解底层解析方式请参考:浅谈 Java XML 底层解析方式 2>Dom4j:基于 JAXP 解析方式 ...