文档章节

HTML- css多列布局

指尖残雪
 指尖残雪
发布于 2016/05/22 23:56
字数 502
阅读 2
收藏 0
点赞 2
评论 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

CSS 布局模块

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

楠木楠 ⋅ 2016/12/06 ⋅ 0

Div+Css布局教程(-)CSS必备知识

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

城固如春 ⋅ 2016/11/12 ⋅ 0

一小时搞定DIV+CSS布局-固定页面开度布局

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

小和尚敲代码 ⋅ 2016/03/03 ⋅ 0

25 个 CSS3 高级用户界面特效教程

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

彭博 ⋅ 2013/04/09 ⋅ 19

我淘到的各种jQuery Grid网格插件

如今,绝大多数网站都要依靠网格来进行布局,拥有一些好的Grid网格布局插件能大大地节约开发时间,还能在满足响应式布局的同时拥有迷人的外观。接下来,小编带大家来认识15款非常棒的响应式j...

lanmeimei ⋅ 2014/03/05 ⋅ 0

CSS注意事项(一)

层叠的概念 层叠规则重点:自上而下,相同属性:一般后面的覆盖前面的,优先级高的覆盖优先级低的 层叠是CSS的核心机制,理解了它才能以最经济的方式写出最容易改动的CSS, 让文档外观在达到...

ShirlyK ⋅ 2016/08/27 ⋅ 0

网页布局基础(1)-自动居中一列布局

基础知识 W3C标准:结构化标准语言(HTML / XML) 表现标准语言(CSS) 行为标准语言(DOM / ECMAScript) 倡导:结构、样式、行为分离。 一、CSS定位机制 1. 标准文档流(Normal flow) 从上...

iBazinga ⋅ 2016/12/04 ⋅ 0

打造称心如意的列表控件

列表是常用的控件,于是要想想怎么弄好它。 一、布局迷思 话说 N 久之前,矩阵型的布局是用 做到的,那时我为这个算法研究过一阵子(从菜鸟来……)。后来 CSS 布局渐替,到 CSS3,出现过几种...

sp42 ⋅ 2015/02/26 ⋅ 0

密切移动端 CSS 框架发布 v1.1 版本

这次更新新增了弹窗dialog登陆版本、confirm确认版本,新增手机移动端的栅格化系统,新增数据表格、加载动画组件,最主要在于手机端的栅格化系统,与传统pc不同,是专门针对于手机小屏幕的栅...

qietuwang ⋅ 2015/07/02 ⋅ 5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

linux 安装docker

通过以下命令下载安装docker wget -qO- https://get.docker.com | sh 执行以上命令后输出以下内容说明安装成功,注意红框中的内容,docker安装成功后默认只有root能使用,红框中给出的提示是...

haoyuehong ⋅ 15分钟前 ⋅ 0

482. License Key Formatting - LeetCode

Question 482. License Key Formatting Solution 思路:字符串转化为char数组,从后遍历,如果是大写字母就转化为小写字母,如果是-就忽略,如果遍历了k个字符(排除-)就追加一个-。 Java实现...

yysue ⋅ 34分钟前 ⋅ 0

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 58分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 今天 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 今天 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 今天 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 今天 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 今天 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 今天 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部