CSS多列布局（栅格布局）

一、多列布局

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多列布局（栅格布局）的更多相关文章

css两列等高布局
布局方案等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法.首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个 ...
css两列自适应宽度布局（左定宽，右自适应）
1.利用BFC: <div id="root"> <div class="left">左</div> <div cla ...
css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
你不知道的css各类布局（二）之流体布局、液体布局、栅格布局
流体布局什么是流在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局概念流体布局(Liquid/Fluid Layout)指的是利用元 ...
bootstrap（关于栅格布局）
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...
浅谈css的栅格布局
栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...
CSS：谈谈栅格布局
检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...
CSS实现栅格布局
CSS实现栅格布局设置容器container: .grid-container { width: 100%; max-width: 1200px; } 清除浮动: .row:before, .row ...
CSS栅格布局
CSS栅格布局认识栅格布局 CSS的栅格布局也被称为网格布局(Grid Layout),它是一种新兴的布局方式. 栅格布局是一个二维系统,这意味着它可以同时处理列和行,与弹性布局相似,栅格系统也是由 ...
CSS多列布局
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

随机推荐

p5437 【XR-2】约定
分析 https://www.cnblogs.com/cjyyb/p/11111404.html 代码 #include<bits/stdc++.h> using namespace st ...
(转)flexpaper 参数
本文转载自:http://blog.csdn.net/z69183787/article/details/18659913 Flexpaper可能用到如下参数 SwfFile (String) 需 ...
java valueOf
valueOf 方法可以将原生数值类型转化为对应的Number类型,java.lang.Number 基类包括ouble.Float.Byte.Short.Integer 以及 Long派生类, 也可 ...
After laptop installed fedora23
en_US.UTF-8和 zh_CN.UTF-8 en和zh是语言, US和CN是分地区. 两者的编码UTF-8都差不多.只是用语言环境来表示时间, 数字, 温度等的不同自定义程序快捷键: 在选中条 ...
06 使用bbed提交delete的数据--01
使用bbed模拟delete提交操作 --session 1 TEST@ orcl )); Table created. TEST@ orcl ,'AAAAA'); row created. TEST ...
MVC 源码系列之控制器执行（一）
控制器的执行之前说了Controller的激活,现在看一个激活Controller之后控制器内部的主要实现. public interface IController { void Execute( ...
C#怎么让字符串定长，不够的用空格补齐
string.PadLeft 或者 string.PadRight : string.PadLeft 表示如果一个字符串的长度小于指定的值,则在字符串的左侧(也就是前面)用指定的字符填充,直到字符串 ...
Centos7上安装Nginx两种方法
源码编译安装 http://nginx.org/en/download.html 到官网下载,然后用XFTP上传到root目录把文件解压出来 tar -zxvf nginx-1.16.0.tar.g ...
【ABAP系列】SAP 读取生产订单记入文档的货物移动明细
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 读取生产订单记入文档的 ...
Web高级 JavaScript中的算法
算法排序算法稳定排序待排序序列中相等元素在排序完成后,原有先后顺序不变. 非稳定排序有序度待排序序列中有序关系的元素对个数. 逆序度 1. 插入排序遍历有序数组,对比待插入的元素大小,找到 ...

CSS多列布局（栅格布局）

一、多列布局

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

随机推荐

热门专题