文档章节

HTML- css多列布局

指尖残雪
 指尖残雪
发布于 2016/05/22 23:56
字数 502
阅读 3
收藏 0

在CSS3中,也新增了一些关于文本布局的几个比较简单的属性。通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样。

新增的部分属性,以及浏览器支持情况:

属性 浏览器支持
column-count IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera
column-gap IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera
column-rule IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera

注:

  • 在Firefox浏览器中,要加(-moz-)前缀。
  • 在Chrome和Safari浏览器中,要加(-webkit-)前缀。
  • 对于IE浏览器,只支持IE10以及以上版本。

新增的属性以及描述:

属性 描述
column-count 定义元素应该被分隔的列数
column-fill 定义列的填充方式
column-gap 定义列之间的间隔距离
column-rule column-rule属性的简写属性,定义列之间的规则
column-rule-color 定义列之间的规则颜色
column-rule-style 定义列之间的规则样式
column-rule-width 定义列之间的规则宽度
column-span 定义元素应该横跨的列数
column-width 定义列的宽度
columns column-width 和 column-count 的简写属性

通过这几个新增属性的定义,我可以对文本进行简单的排版(Firefox浏览器)

*{
	-moz-column-count: 3;
	-moz-column-gap: 40px;
	-moz-column-rule: 4px outset #ff0000;"
}

上面的CSS样式是元素中的文本分为3列,列之间的距离为40px,列之间用颜色为#ff0000、宽度为4px的线分开。

image

同样,我们也可以对一些元素中的内容进行排版。

例如我们可以对列表进行排版:

image

部分代码为(Firefox浏览器):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
ul {
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -moz-column-rule: 4px outset #ff0000;
}
li {
    background: #0CF;
    border: #069 1px solid;
    display: inline-block;
    width: 150px;
    margin: 5px 0;
}
</style>
</head>
<body>

<ul>
    <li style="height:50px">1</li>
    <li style="height:100px">2</li>
    <li style="height:80px">3</li>
    <li style="height:60px">4</li>
    <li style="height:70px">5</li>
    <li style="height:50px">6</li>
    <li style="height:100px">7</li>
    <li style="height:80px">8</li>
    <li style="height:90px">9</li>
    <li style="height:30px">10</li>
</ul>
</body>
</html>

本文转载自:http://blog.csdn.net/bq1073100909/article/details/46585775

共有 人打赏支持
指尖残雪
粉丝 7
博文 73
码字总数 0
作品 0
上海
后端工程师
【Skeleton】布局

rabbit Skeleton是一个轻量级的CSS栅格系统。里面用了400行代码就把排版布局、按钮、表单和表格的装饰都定义好了。 用Skeleton布局,在理解上其实和用 标签。 HTML代码 设置好容器之后,接下...

KelvinZ
01/09
0
0
CSS 布局模块

在众多浏览器刚刚支持 CSS 的时候,我就已经开始使用它了,并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候,浏览器之间的兼容性虽然不好,但我仍然热衷于尝试层出不穷的新特性...

楠木楠
2016/12/06
84
0
Div+Css布局教程(-)CSS必备知识

目录: 1、Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解。 一、CSS布局属性 Width:设置对象的宽度(width:45px)。 Height:设置对象的高度(Height:45px;)。 Back...

城固如春
2016/11/12
3
0
一小时搞定DIV+CSS布局-固定页面开度布局

本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局。 转载请标明:http://www.kwstu.com/ArticleView/divcss2013929173533658 关于DIV+CSS布局中用到的CSS...

小和尚敲代码
2016/03/03
49
0
25 个 CSS3 高级用户界面特效教程

1、SVG & CSS 交互图表 该教程将让你对 SVG 效果创建与交互有一定了解。 2、CSS3 3D 动画直方图 该教程将叫你创建一个完整的 3D 直方图。你需要遵循一些要求,使直方图有独立的背景,能够自适...

彭博
2013/04/09
7.7K
19

没有更多内容

加载失败,请刷新页面

加载更多

HashTable

Hashtable 是一个散列表,它存储的内容是键值对(key-value)映射 Hashtable 继承于Dictionary,实现了Map、Cloneable、java.io.Serializable接口 Hashtable 的函数都是同步的,这意味着它是线...

职业搬砖20年
17分钟前
1
0
Linux系统状态查看命令1

10月23日任务 10.1 使用w查看系统负载 10.2 vmstat命令 10.3 top命令 10.4 sar命令 10.5 nload命令 查看系统负载 w命令 # 第一行:当前系统时间,系统启动时间,登录的用户,系统负载:1分钟...

robertt15
33分钟前
1
0
缓存那些事

前言 一般而言,现在互联网应用(网站或App)的整体流程,可以概括如图1所示,用户请求从界面(浏览器或App界面)到网络转发、应用服务再到存储(数据库或文件系统),然后返回到界面呈现内容...

Skqing
42分钟前
2
0
nginx开启stub_status模块配置方法

nginx开启stub_status模块配置方法 2017年12月13日 15:57:29 ly_dengle 阅读数:3765 标签: stub_statusnginxnginx开启stub_status模块 更多 个人分类: 软件工具php 版权声明:本文为博主原...

linjin200
48分钟前
3
0
挑逗 Java 程序员的那些 Scala 绝技

有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言;而另外一些 Java 开发者却对它望而却步,认为它过于复杂而难以理解。同样是 ...

joymufeng
51分钟前
134
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部