我们通过学习 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. 虚拟机（JVM）如何加载类

    首先JVM加载类的一般流程分三步: 加载 链接 初始化 那么是否全部Java类都是这样三步走的方式加载呢?我们可以从Java的数据类型去出发.Java分基本类型和引用类型.其中按照面向对象的特性,一切 ...

  2. css实现文本溢出用...显示

    文本溢出省略号显示,要实现这个必须 要有四个条件: 1.须有容器宽度:width:value 2.强制文本在一行内显示:white-space:nowrap: 3.溢出内容隐藏:overflow:hi ...

  3. ceph cache pool配置

    https://my.oschina.net/hanhanztj/blog/515410 0.引入 本文介绍如何配置cache pool tiering. cache pool的作用是提供可扩展的ca ...

  4. ASP.NET Core学习——7

    多环境ASP.NET Core介绍了支持在多种环境中管理应用程序行为的改进,如开发(devlopment),预演(staging)和生成(production).环境变量用来指示应用程序正在运行的环境 ...

  5. jQuery 删除行（带跨行的表格）

    jQuery 删除行(带跨行的表格) 实现效果,点击删除按钮后,在保证原来表格结构的基础上,移除当前行. 代码原理: 1.点击行后判断当前行的第一个<td>,是否包含rowspan属性,如 ...

  6. 【git】如何ignore一个文件的更改又保留其初始版本

    参考: https://compiledsuccessfully.dev/git-skip-worktree/ https://stackoverflow.com/questions/9794931/ ...

  7. 数据库SQL调优的几种方式(转)

    原文地址:https://blog.csdn.net/u010520146/article/details/81161762 在项目中,SQL的调优对项目的性能来讲至关重要,所有掌握常见的SQL调优方 ...

  8. spss乱码问题解决

    spss乱码问题解决 方法1:网友kuangsir6提供 选择字体为:DFKai-SB 格式(我并没有找到这个格式) 方法是 SPSS(PASW)---Edit---Options---Viewer- ...

  9. AngularJS之ng-class

    https://www.cnblogs.com/CreateMyself/p/5566412.html

  10. vue input框type=number 保留两位小数自定义组件

    第一步:自定义组件MyNumberInput.vue<template> <input class="numberInput" type="number ...