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. C#中的ref和out的区别

    转载原地址 http://www.cnblogs.com/gjahead/archive/2008/02/28/1084871.html ref和out的区别在C# 中,既可以通过值也可以通过引用传递 ...

  2. HDU 1828 Picture (线段树+扫描线)(周长并)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1828 给你n个矩形,让你求出总的周长. 类似面积并,面积并是扫描一次,周长并是扫描了两次,x轴一次,y ...

  3. POJ1062昂贵的聘礼(dijkstra)

    昂贵的聘礼 题目大意是说有N个物品,每个物品都有自己的价格,但同时某些物品也可以由其他的(可能不止一个)替代品,这些替代品的价格比较“优惠”,问怎么样选取可以让你的花费最少来购买到物品1 由于有N个物 ...

  4. UVaLive 6628 Grachten (水题,数学)

    题意:给定一个平面图形并且且给了几条连,求一条. 析:简单么,三角形相似,很简单就AC. 代码如下: #pragma comment(linker, "/STACK:1024000000,1 ...

  5. UVa 11971 Polygon (数学,转化)

    题意:一根长度为n的木条,随机选k个位置将其切成k+1段,问这k+1段能组成k+1条边的多边形的概率. 析:这个题,很明显和 n 是没有任何关系的,因为无论 n 是多少那切多少段都可以,只与切多少段有 ...

  6. django控制admin的model显示列表

    class goods(models.Model):    name = models.CharField(max_length=300)    price = models.IntegerField ...

  7. Jstl标签的使用

    一. 配置 JSTL 包括两个 JAR 文件, jstl.jar 和 standard.jar .是什么没有必要管,重在应用( 1+1 ? =2 ,我们没有必要深究,只需要知道这么用就行.). 原文引 ...

  8. Oracle DataGuard 物理Standby 搭建(上)

    物理standby database 环境搭建 Arch asysnc Oracle Dataguard host IP Oracle_sid DB_unique_name FAL_server FA ...

  9. Js Pattern - Namespace Pattern

    bad code // BEFORE: 5 globals // Warning: antipattern // constructors function Parent() {} function ...

  10. UOJ #142. 【UER #5】万圣节的南瓜灯 并查集

    #142. [UER #5]万圣节的南瓜灯 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/142 Descrip ...