我们通过学习 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. 矩阵（R语言）

    mymatrix <- matrix(vector, nrow=number_of_rows, ncol=number_of_columns,byrow=logical_value,dimnam ...

  2. OC学习篇之---Foundation框架中的NSDirctionary类以及NSMutableDirctionary类

    昨天学习了Foundation框架中NSArray类和NSMutableArray类:http://blog.csdn.net/jiangwei0910410003/article/details/4 ...

  3. VS2013 MFC基于对话框编程

    前言一直利用Qt库做Ui设计,但针对于一些MFC项目,掌握一些必要的MFC开发技巧还是很有必要的.这篇博客里就将自己所学的一些MFC浅显知识记录一下,方便今后的学习.博客里只记录关键步骤. 一.新建M ...

  4. shell变量相关知识

    环境变量和普通变量 一.几个常用命令: 1. set : 输出所有变量,包含全局变量和局部变量 2. env : 只显示全局变量 3. declare : 输出所有的变量,函数,整数和已经导出的变量 ...

  5. stc单片机笔记

    volatile是一个类型修饰符(type specifier).volatile的作用是作为指令关键字,确保本条指令不会因编译器的优化而省略,且要求每次直接读值. 简单地说就是防止编译器对代码进行优 ...

  6. Java学习之面向对象---继承

    继承:子继承父,子可以拥有父的所有. 继承的好处: 1.提高了代码的复用性 2.让类与类之间产生了关系.有了这个关系,才有了多态的特性 Java 只支持单继承,不支持多继承 class A { voi ...

  7. PHP 代码编写注意事项总结归纳

    1- 编写模块化代码 良好的PHP代码应该是模块化代码.PHP的面向对象的编程功能是一些特别强大的工 具,可以把你的应用程序分解成函数或方法.你应该尽可能多的从你的应用程序的服务器端分开前端的HTML ...

  8. nginx安装教程（详细）

    所见即所得编辑器, editorhtml{cursor:text;*cursor:auto} img,input,textarea{cursor:default}.cke_editable{curso ...

  9. Web RTC录视频

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Java面试必问-ThreadLocal

    前言 在面试环节中,考察"ThreadLocal"也是面试官的家常便饭,所以对它理解透彻,是非常有必要的. 有些面试官会开门见山的提问: “知道ThreadLocal吗?” “讲讲 ...