我们通过学习 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. python3 实现简单ftp服务功能（客户端）

    转载请注明出处! 可执行的命令: lspwdcd put rm get mkdir 上传下载,显示进度百分比以及平均上传下载速度 客户端 main代码: #Author by Andy #_*_ co ...

  2. kubernetes使用kubeadm升级集群

    升级前准本  官网: https://kubernetes.io/docs/reference/setup-tools/kubeadm/kubeadm-upgrade/查看可升级的组件 [root@h ...

  3. win7 SP1 64位 原版 百度网盘下载

    下载地址:https://pan.baidu.com/s/1bnOtKU5YH4gSr1RmZR2BkQ 提取码 :s9o7 扫码下载:

  4. 生成函数小结——[ EGF ][ ln 的一个套路 ][ 概率生成函数 ]

    看了jcvb的WC2015交流课件.虽然没懂后面的复合逆部分,但生成函数感觉受益良多. 指数生成函数 集合中大小为 i 的对象的权值是 \( a_i \) ,该集合的生成函数是 \( \sum\lim ...

  5. %各位大佬的博客.tql

    线性基:https://www.cnblogs.com/ljh2000-jump/p/5869991.html#4219854 数位DP  https://blog.csdn.net/jk211766 ...

  6. CEF的备忘笔记

    CEF: Chromium Embeded Framewrok;  (Chromium嵌入式框架)可以在PC(Linux,MacOS,Windows)上把Chromium的内核嵌入到应用程序的框架: ...

  7. [CSP-S模拟测试]:蛋糕（区间DP）

    题目传送门(内部题34) 输入格式 第一行,一个正整数$n$.第二行,$n$个正整数$a_i$,保证$a_i$互不相等. 输出格式 一行一个整数表示间宫卓司得到的蛋糕大小总和的最大值. 样例 样例输入 ...

  8. Linux桌面与命令行切换

    1.首先在安装Linux的时候是选则Desktop桌面方式安装 2.切换命令 2.1快捷键:Ctrl+Alt+F1    切换到桌面模式 Ctrl+Alt+F3    切换到命令行模式

  9. 耗时十个月的德国APS，教会我的学习方法

    考过了准备了10个月的Aps ,想送给关注我的8175个粉丝,一份礼物,感谢你们看的起我,对我的支持和关注. 这份礼物,我就大言不惭的称之为:达令的学习方法. 我的考试经历:高考两次,中戏艺考三试,导 ...

  10. Redis实战与分析

    楼主在实现一分布式存储系统时,拟采用Redis来做一个pull的过程来进行多机之间的数据拉取,于在此将redis安装部署过程分享一下,并学习波Redis的内部存储结构,Redis中间的hash环问题, ...