我们通过学习 CSS3，能够创建多个列来对文本进行布局 ，就像报纸那样排版那样！

可以参考详细说明：http://www.w3school.com.cn/css3/css3_multiple_columns.asp

如下多列属性：

column-count：规定元素应该被分隔的列数。
column-gap：规定列之间的间隔。
column-rule：设置所有 column-rule-* 属性的简写属性。

参考代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>多列布局</title>

        <style>

            #one{

                 column-count: 3;  /*分3栏*/

                column-gap: 40px;  /*栏间距*/

                column-rule: 2px solid lightgreen;  /*栏间分隔线，与border设置类似*/

                 line-height: 26px;

                font-size: 14px;

                height: 500px;

                background: lightcyan;

                background: lightcyan;

            }

        </style>

    </head>

    <body>

        <div id="one">

              CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

        </div>

    </body>

</html>

CSS3布局篇（多列布局）的更多相关文章

  1. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  2. 160427、CSS3实战笔记--多列布局

    通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5   多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...

  3. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  4. css布局之两列布局

    我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...

  5. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  6. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

  7. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  8. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  9. 慕课笔记利用css进行布局【一列布局】

    <html> <head> <title>一列布局</title> <style type="text/css"> bo ...

  10. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

随机推荐

  1. 观察者模式Observer

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11409319.html 1. 定义定义对象间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依 ...

  2. shell脚本编写nginx部署脚本

    下面为shell脚本编写的nginx的安装及修改nginx.conf的脚本,脚本比较简单: #!/bin/bash function yum_install(){ yum install epel-r ...

  3. boost scope exit

    Boost.ScopeExit provides the macro BOOST_SCOPE_EXIT, which can be used to define something that look ...

  4. vue开发环境及vue相关

    一.安装node.js Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js. 二.安装cnpm cnpm是淘宝对npm的镜 ...

  5. 【LeetCode 38】报数

    题目链接 [题解] 模拟题 [代码] class Solution { public: string inttostr(int x){ string temp=""; while ...

  6. 网络-Docker 提供的几种原生网络和自定义网络(11)

    Docker 网络从覆盖范围可分为单个 host 上的容器网络和跨多个 host 的网络,本章重点讨论前一种 Docker 安装时会自动在 host 上创建三个网络,我们可用 docker netwo ...

  7. rocketmq集群、配置详解和常用命令

    集群原文地址: http://www.cnblogs.com/520playboy/p/6716235.html 常用命令原文地址: http://www.cnblogs.com/gmq-sh/p/6 ...

  8. gokit 统计分析 M2M接入服务 OTA固件升级 硬件社交化

    统计分析 M2M接入服务  OTA固件升级 硬件社交化 统计分析 为智能硬件定制的统计分析服务.只需添加入一行代码的集成工作,多维度的设备使用和用户行为数据就能自动统计出来. 演示 特色一:设备上线情 ...

  9. JavaScript 获取时间，时间戳

    一. 动态获取js时间 1.方法一:最简单的写法,直接输出时间到页面 <!DOCTYPE html> <html> <head> <title>< ...

  10. DPL, CPL及RPL之间的关系

    DPL: Descriptor Privilege Level 1) GDT/LDT表中的描述符 GDT/LDT表中的描述符,描述的是一段内存. 其中的DPL代表着GDT/LDT中的描述符描述的内存段 ...