css3 多列布局

多列布局属性：

columns：column-widht和column-count的缩写。

column-width:定义每列列宽度。

column-count:定义分列列数。

column-gap:定义列间距。

column-rule:定义列边框。

column-rule-width:定义列边框的宽度。

column-rule-style:定义列边框的样式。

column-rule-color:定义列边框的颜色。

column-span:定义子元素跨列效果。

column-fill:控制每列列高效果。

<!DOCTYPE html>

<html lang="en" xmlns="http://	www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    body{

        -moz-column-count:3;

        -webkit-column-count:3;

        column-count:3;

        -moz-column-gap:20px;

        -webkit-column-gap:20px;

        column-gap:20px;

        -moz-column-rule:double;

        -webkit-column-rule:double;

        column-rule:double;

    }

    h1{

        -moz-column-span:all;

        -webkit-column-span:all;

        column-span:all;

        text-align:center;

        border-bottom:double;

    }

</style>

</head>

<body>

<h1>淮阴侯韩信</h1>

<p>后数日，蒯通复说曰：“夫听者事之候也，计者事之机也，听过计失而能久安者，鲜矣。听不失一二者，不可乱以言；计不失本末者，不可纷以辞。夫随厮养之役者，失万乘之权；守儋石之禄者，阙卿相之位。故知者决之断也，疑者事之害也，审豪氂之小计，遗天下之大数，智诚知之，决弗敢行者，百事之祸也。故曰‘猛虎之犹豫，不若蜂虿之致螫；骐骥之局躅，不如驽马之安步；孟贲之狐疑，不如庸夫之必至也；虽有舜禹之智，吟而不言，不如瘖聋之指麾也’。此言贵能行之。夫功者难成而易败，时者难得而易失也。时乎时，不再来。原足下详察之。”韩信犹豫不忍倍汉，又自以为功多，汉终不夺我齐，遂谢蒯通。蒯通说不听，已详狂为巫。</p>

</body>

</html>

css3 多列布局记的更多相关文章

  1. CSS3 多列布局——Columns

    CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...

  2. 第 28 章 CSS3 多列布局

    学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一．早期多列问题 我们 ...

  3. CSS3多列布局

    通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 在本章中,您将学习如下多列属性: column-count column-gap column-rule 浏览器支持 属性 浏览器 ...

  4. css3 多列布局使用

    css3的出现,解决了不少前端的问题,比如动画,圆角等: 这里总结一下css3 的多列布局: w3c上给出了很多属性: 我们一般用到column-count.column-gap.column-wid ...

  5. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  6. CSS自学笔记（15）:CSS3多列布局

    在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性 浏览器支持 column ...

  7. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  8. CSS3_多列布局

    CSS3 多列布局 可以随屏幕大小自适应布局 能够创建多个列对文本进行布局 属性 column-count: 5; 将文本分成 5 列    注意: 用户的屏幕大小 column-fill: bala ...

  9. 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. POJ 1064 Cable master (二分答案)

    题目链接:http://poj.org/problem?id=1064 有n条绳子,长度分别是Li.问你要是从中切出m条长度相同的绳子,问你这m条绳子每条最长是多少. 二分答案,尤其注意精度问题.我觉 ...

  2. HDU 3666 THE MATRIX PROBLEM (差分约束)

    题意:给定一个最大400*400的矩阵,每次操作可以将某一行或某一列乘上一个数,问能否通过这样的操作使得矩阵内的每个数都在[L,R]的区间内. 析:再把题意说明白一点就是是否存在ai,bj,使得l&l ...

  3. C#引用传递

    学过C#的人都知道,通过值或通过引用,值类型和引用类型都可以作为方法参数传递.在C#中,不管是值类型或者是引用类型,所有方法参数在默认情况下是通过值传递的. 1)通过值传递值类型 在通过值传递作为方法 ...

  4. AOE关键路径

    这个算法来求关键路径,其实就是利用拓扑排序,首先求出,每个节点最晚开始时间,再倒退求每个最早开始的时间. 从而算出活动最早开始的时间和最晚开始的时间,如果这两个时间相等,则为关键路径. 时间复杂度为O ...

  5. js奇葩错误

    局部刷新中显示图片: 错误写法:var innerDiv = "<p class='town_con' id='city1'>";              var d ...

  6. CKeditor3.6.2 配置与精简

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src= ...

  7. PL/pgSQL的RETURN QUERY例子

    我的例子: 数据准备: create table custinfo(custid integer,callingcnt integer); ,),(,),(,); 函数生成: CREATE OR RE ...

  8. uoj #139. 【UER #4】被删除的黑白树 dfs序 贪心

    #139. [UER #4]被删除的黑白树 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/139 Descript ...

  9. BZOJ 3170: [Tjoi 2013]松鼠聚会 切比雪夫距离

    3170: [Tjoi 2013]松鼠聚会 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/p ...

  10. C++中使用union的几点思考(转)

    C++中使用union的几点思考 大卫注:这段时间整理旧资料,看到一些文章,虽然讲的都是些小问题,不大可能用到,但也算是一个知识点,特整理出来与大家共享.与此相关的那篇文章的作者的有些理解是错误的,我 ...