1. /*css3中的布局*/
  2. .wrapper{
  3. margin:auto;
  4. width:300px;
  5. height:200px;
  6. border:2px dotted blue;
  7. -webkit-columns:15px 3;/*表示多列布局,每一列15px 有3列,内容多于3列则该参数失效!例如对一篇文章可以进行多列布局显示*/
  8.  
  9. -webkit-column-count:;
  10. -webkit-column-width:15px;/*将width和count属性拆开来单独使用,弱拆开且同时使用,浏览器根据具体情况会可能会使某一属性失效*/
  11. -webkit-column-gap:2em;/*设置列间距为2字符,不设置默认情况下为1字符间距*/
  12.  
  13. -webkit-column-rule:2px solid red;/*定义列与列之间的分割线为2px 实体 红色 该分割线不占用空间位置 like a ghost*/
  14.  
  15. }
  16. h2{
  17. text-align:center;/*文本居中显示*/
  18. -webkit-column-span:all;/*令h2横跨所有列*/
  19. }

css3-columns多列布局的更多相关文章

  1. CSS3之多列布局columns详解

    CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...

  2. 第 28 章 CSS3 多列布局

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

  3. 多列布局——Columns

    为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...

  4. css3 多列布局使用

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

  5. CSS 多列布局

    CSS3 新增多列布局适合排版很长的文字内容,让其多列显示. 一.多列布局 语法格式: columns:column-width | column-count; column-width:定义每列的宽 ...

  6. CSS3 多列布局——Columns

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

  7. css3 多列布局记

    css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...

  8. CSS3 Columns:比table更好用的分列式布局方法

    CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦.当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局.幸运的是,CSS3里提供了一批新 ...

  9. CSS3多列布局

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

  10. 160427、CSS3实战笔记--多列布局

    通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5   多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...

随机推荐

  1. 大于16MB的QSPI存放程序引起的ZYNQ重启风险

    ZYNQ芯片是近两年比较流行的片子,双ARM+FPGA,在使用分立FPGA和CPU的场合很容易替代原来的分立器件. ZYNQ可以外接QSPI FLASH作为程序的存储介质. QSPI和SPI flas ...

  2. 【hrbust2294】方方正正

    题意 哈理工2016级新生程序设计全国邀请赛C题 一个r行c列的01矩阵,告诉你每行的和.每列的和,问是否存在这样的矩阵? 题解 首先,行和和列和之和要相等,否则一定是NO. 然后根据Gale-Rys ...

  3. Android基础总结(四)

    网络图片查看器 确定图片的网址 发送http请求 URL url = new URL(address); //获取连接对象,并没有建立连接 HttpURLConnection conn = (Http ...

  4. 【bzoj1415】 Noi2005—聪聪和可可

    http://www.lydsy.com/JudgeOnline/problem.php?id=1415 (题目链接) 题意 一张图,聪聪想吃可可.每单位时间聪聪可以先移动两次:可可后移动一次或停在原 ...

  5. oracle--第一天议--bai

    第一天: 1 oracle的安装 a 卸载 b 安装服务器软件及数据库(orcl) --OracleServiceOrcl c 执行网络配置--配置监听1521,本地net服务名(创建1个外部连接的u ...

  6. RabbitMQ安装实践

    背景: 最近一个项目的测试环境需要用到rabbitMQ,但运维和开发都没时间,于是自己试着安装了一发,发现安装很简单,记一笔如下: 安装步骤 查看官网上有不同的安装方法,可使用下载安装包或者直接通过其 ...

  7. C++类成员在内存中的存储及对齐方式

    前言:数据对齐的基本理论参见文章:http://www.cnblogs.com/MyBlog-Richard/articles/5993448.html 一.空类的大小 C++中空类的大小是1,这是因 ...

  8. PowerShell Notes

    1.  概要 - PowerShell 是cmdlet(command-let)的指令集合,类似unix的bash. - IDE: Windows PowerShell ISE,不区分大小写,可以用命 ...

  9. MD5工具类,提供字符串MD5加密、文件MD5值获取(校验)功能

    MD5工具类,提供字符串MD5加密(校验).文件MD5值获取(校验)功能 : package com.yzu.utils; import java.io.File; import java.io.Fi ...

  10. [Bash Shell] Shell学习笔记

    1. Shell简介 Shell本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命 ...