多列布局(column)
时间:2019-11-16
本文章向大家介绍多列布局(column),主要包括多列布局(column)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
容器的属性
column-width: auto | < length > 。给列定义一个最小宽度(min-width)。
- auto: 列宽由其他元素决定。
- length: 显式设置最小宽度。
column-count: auto | < integer >定义列的数量。
- auto: 元素只有一列。就像没有设置一样。
- < integer >: 正整数值。取值是大于0的整数,负值无效。
columns: < column-width > || < column-count >。是column-width和column-count的简写。次序随意。
列宽 = ( 父元素宽度 - (列数-1) 列间隙 ) / 列数*
比如:父元素40em,分为4列,列间隙为2em。那么列宽为( 40 - (4-1) * 2) / 4 = 8.5em。
如果显式设置的列宽小于这个宽度,它会以这个宽度展示。
如果显式设置的列宽大于这个宽度,它会按照合适的尺寸重新排列列宽和列数。当前设置的列宽和列数并不准确。
column-gap: normal | < length >。定义列间距。值过大时会撑破布局。
normal: 默认值,由浏览器解析,一般是lem。
< length >: 有浮点数字和单位标识符组成的长度值。如:2.1em。
column-rule: < column-rule-width > | < column-rule-style > | < column-rule-color >。定义列边框。
它的中心线始终和列间距的中心线一样。换言之,它总处于两列的中间。和border类似。如果列边框大于列间距,并不会自动消失。列边框超出列间距的部分就像是沉在文字的下方一样(背景效果)。
column-fill: auto | balance。定义多列中每一列的高度是否统一。
这个属性很奇怪。并且在浏览器中不统一。它有两个值:auto | balance。在 ie10/ie11/opera40/chrome52中测试的结果都是一样的,发现这两个属性并没有区别。在firefox49中测试,这两个属性是有区别的,其中balance是每列高度差不多(对齐),auto就自动合并成一列了,无论自己设置的是多少列。
项目(元素)属性
column-span: none | all。定义一个元素横跨多少列。
如果我们常将标题横跨所有列。那么,column-span: all。其默认值是,column-span: none;表示不跨列。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多列布局|column-span</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 40em;
margin:0 auto;
border: 1px solid #ccc;
/*多列布局*/
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
-moz-column-rule: .1em dashed #ccc;
-webkit-column-rule: .1em dashed #ccc;
column-rule: .1em dashed #ccc;
-webkig-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
}
h1 {
font-size: 1.5em;
margin-bottom: 1em;
-moz-column-span: all;
-webkit-column-span: all;
column-span: all;
padding-bottom: 5px;
text-align: center;
border-bottom: 2px solid #ccc;
}
p {
margin-bottom: 1em;
text-indent: 2em;
line-height: 1.625;
font-size: .7em;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>金融时报:微软能否拯救Windows 8?</h1>
<p>网易科技讯 5月8日消息,据国外媒体报道,Windows 8上市以来遭到业界与用户的各种诟病,销售量也不乐观。虽然微软已经意识到问题的严重性,但是鲍尔默能否力挽狂澜,还不得而知。今天金融时报撰文分析Windows 8与微软所遇到的困境,并展望了他们的未来,以下是文章主要内容:</p>
<h3>微软能否拯救Windows 8?</h3>
<p>这个问题关乎世界上最大的软件公司的未来以及其首席执行官史蒂夫·鲍尔默(Steve Ballmer)的职业生涯。微软为了保持其在PC领域的领先地位而推出的操作系统并没有得到用户的认可。</p>
<p>不过,看起来微软已经意识到问题的严重性。一个标志性动作就是,本周早些时候,微软宣布在今年年底之前发布Windows8的更新版本,代号为“Blue”。这是微软第一次打破了按年发布的传统,增加软件版本发布的频率,但跟竞争对手苹果和谷歌的软件更新发布频率还有不小差距。不过不管怎样这都说明微软已经开始采取行动,应对更激烈的竞争。</p>
<p>设计融合PC和平板电脑的Win8已经遭到了业界各种严厉的批评。纽约高科技研究公司Envisioneering的分析师Richard Doherty表示,“坐在Win8前面会让人感觉这操作系统蠢毙了,早期使用反馈研究表明人们广泛表示对win8不满。”Win8结合了传统PC界面和平板触摸屏界面的设计理念也遭人诟病,一些评论认为微软过于雄心勃勃,以至于在两款平台上都没有做好。</p>
<p>不过微软现在已经准备承认该软件确实给PC用户带来了不便:PC用户面对Win8时,需要经历一个十分陡峭的“学习曲线”。同时,微软也在做出改变,旨在提高Win8的可用性。虽然没有确凿证据,但微软受到了来自PC用户不小的压力。PC用户的希望是,当他们打开自己的PC时,是熟悉的Windows桌面,而不是被强制使用“丰富多彩”的微软瓷砖。同时,PC用户也一直希望微软把“开始”按钮弄回来。长期以来这一直是PC用户最熟悉的导航工具。</p>
<p>这些反馈表明,很多用户还没有准备好使用Windows的触摸屏操作系统,而是继续把Windows当作PC时代的产品。微软本周也承认Win8的成功将不仅仅需要用户界面的变化。Win8的另一个问题是价格。不过微软目前正在推动硬件厂商生产尺寸更小,成本更低的平板。这样的话,Win8平板的价格可能迅速下降到400美元左右,并向300美元看齐。</p>
<p>不过值得微软庆幸的是至少目前Win8没有遇到Vista的软件质量问题。许多企业用户因为Vista的各种弊病,直接跳过该版本,直接从早期的XP升级到Windows 7。约三分之二的企业用户目前已经升级到Windows 7。不过他们目前又开始了另一次观望,已决定是否要做新的升级。如果企业用户决定跳过Win8,那么微软将错过追赶苹果和谷歌的重要机会。</p>
</div>
</body>
</html>
效果图:
持续更新,感谢大家支持。
原文地址:https://www.cnblogs.com/homehtml/p/11873874.html
- Servlet与Jsp的结合使用实现信息管理系统一
- Mac下nvm管理node.js版本问题
- 自定义tab吸顶效果一(原理)
- OpenGL ES学习001---绘制三角形
- Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失
- 披着狼皮的羊——寻找惠普多款打印机中的RCE漏洞
- Android之MaterialDesign应用技术
- 蛙啊!老母亲给你整理了DEDECMS漏洞集合,快回家!
- Android之Bmob移动后端云服务器
- golang基于redis lua封装的优先级去重队列
- Java设计模式总汇二(小白也要飞)
- Java设计模式总汇一
- Android数据绑定技术二,企业级开发
- Android数据绑定技术一,企业级开发
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 习题4-2 求幂级数展开的部分和
- 2020 年 9 月编程语言排行榜
- 浙大版《C语言程序设计(第3版)》题目集 习题4-3 求分数序列前N项和
- 浙大版《C语言程序设计(第3版)》题目集 习题4-4 特殊a串数列求和
- 一个可能让你的页面渲染速度提升数倍的CSS属性
- 浙大版《C语言程序设计(第3版)》题目集 习题4-6 水仙花数
- 浙大版《C语言程序设计(第3版)》题目集 习题4-7 最大公约数和最小公倍数
- 高危漏洞!黑客可利用sudo获得 root权限
- 浙大版《C语言程序设计(第3版)》题目集 习题4-8 高空坠球
- 浙大版《C语言程序设计(第3版)》题目集 习题4-10 猴子吃桃问题
- 6种展示代码的绝佳方式
- 你电脑里的IE浏览器正在被黑客利用
- 浙大版《C语言程序设计(第3版)》题目集 习题6-8 统计一行文本的单词个数
- 浙大版《C语言程序设计(第3版)》题目集 练习7-2 求最大值及其下标
- 浙大版《C语言程序设计(第3版)》题目集 练习7-3 将数组中的数逆序存放