CSS3布局篇（多列布局）
我们通过学习 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布局篇（多列布局）的更多相关文章
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- 160427、CSS3实战笔记--多列布局
通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5 多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- css布局之两列布局
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 慕课笔记利用css进行布局【三列布局】
三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- 慕课笔记利用css进行布局【一列布局】
<html> <head> <title>一列布局</title> <style type="text/css"> bo ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
随机推荐
- JavaSE---Runtime类
1.概述 1.1 Runtime类 代表 java程序运行时环境: 1.2 Runtime类 提供的类方法: getRuntime():获取Runtime实例: gc():通知垃圾回收器回收资源: ...
- Elasticsearch：使用function_score及soft_score定制搜索结果的分数
我们将介绍使用function_score的基础知识,并介绍一些function core技术非常有用和有效的用例. 介绍 评分的概念是任何搜索引擎(包括Elasticsearch)的核心.评分可以粗 ...
- 【leetcode】976. Largest Perimeter Triangle
题目如下: Given an array A of positive lengths, return the largest perimeter of a triangle with non-zero ...
- 【Flutter学习】组件学习之目录
01. Flutter组件-Layout-Container-容器 02. Flutter组件-Text-Text-文本 03. Flutter组件-Text-RichText-富文本 04. ...
- toleft时设置TabSequence属性为tsReversetoright时设置TabSequence属性为tsStandard
使用这2人控件时,属性taborientation设为toleft时有个问题,具体如下设为toleft时tab会跑到左侧,这时的tab上的文字是反的.当设置为toright时,tab在右侧,这时的ta ...
- windows7+tomcat7+nginx1.11.3 +memcached
测试的环境是windows7+tomcat7+nginx1.11.3 +memcached 安装方法网上很多就不多说了. 1.session共享需要这几个jar 包 下载地址 http://down ...
- leetcode中的一些二分搜索树
235(最近公共祖先) /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left ...
- php中的list()
list()在php中上一个语言结构,并不是一个函数.类似array(),不过array()这个东西我们现在一般很少使用了,因为从php5.4版本开始,我们会直接使用[]来定义数组. 那么,list( ...
- Redis Cluster 设置密码
两种方式 1.修改配置文件 在每个节点的配置文件里面增加密码选项,一定要加上 masterauth,不然 Redirected 的时候会失败. masterauth redispassword req ...
- Win10 打开MSDTC
标签:log com http it sp src c bs io 1,Win+R 打开运行窗口,输入 dcomcnfg,打开组件服务窗口 2,在组件服务 catalo ...