一、多列布局

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. Ueditor1.4.4 Jsp版本视频上传成功，重新编辑时无法打开、在文本框内无法显示、html源码显示src为空

    1. 编辑 ueditor.config.js 第355行 将 whitList 改为 whiteList 2.编辑ueditor.all.js 注释掉7343.7344.7345行代码,即: var ...

  2. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_05 List集合_4_Vector集合

    是jdk1.0开始的一个集合,了解一下就可以了. 同步的意味着单线程.同步意味着慢 遍历在jdk1.0还没有Interator遍历器..它是通过elements Enumeration向量枚举.类似于 ...

  3. abstract 和 interface 抽象类和接口的区别

    初版:以后再整理. 接口是公开的,里面不能有私有的方法或变量,是用于让别人使用的,而抽象类是可以有私有方法或私有变量的, 另外,实现接口的一定要实现接口里定义的所有方法,而实现抽象类可以有选择地重写需 ...

  4. 锐捷网络自动连接python脚本

    1 实现锐捷网络的连接,当断开后自动重连 import os import sys import time ip = 'www.baidu.com' print('开始ping百度') backinf ...

  5. Java ——Character 类

    本节重点思维导图 Character 类用于对单个字符进行操作. Character 类在对象中包装一个基本类型 char 的值 char ch = 'a'; // Unicode 字符表示形式 ch ...

  6. OO第四单元单元总结

    目录 1.本单元两次作业的架构设计 2.四个单元中架构设计及OO方法理解的演进 3.测试理解与实践的演进 4.课程收获 5.给课程的改进建议 1.本单元两次作业的架构设计 第四单元的两次作业,我的表现 ...

  7. [Udemy] ES 7 and Elastic Stack - part 1

    Section 1 基本概念: Index(indices) 相当于 关系型数据库的 table, document 相当于关系型数据库的 row,  还有一个type的概念(可以理解为table的s ...

  8. 前端005/React生命周期

    ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生 ...

  9. Mybatis-学习笔记（1）SqlSessionFactory、SqlSession、Mybatis配置文件configuration的属性标签

    1.mybatis引入项目,只需要引入mybatis-x.x.x.jar包即可. (当然数据库驱动的引入必不可少) 2.SqlSessionFactory 由SqlSessionFactoryBuil ...

  10. host文件无操作权限

    把先用其它启动方式启动电脑,如winpe(网上有制作方法,很简单的),启动后找到FWPKCLNT.SYS所在文件夹, 一般在c/windows/system32/drivers,将drivers文件夹 ...