css3中的多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]
设置或检索对象的列数和每列的宽度
其中:[ column-width ]:设置或检索对象每列的宽度;[ column-count ]:设置或检索对象的列数。
css代码:
body{font:14px/1.5 georgia,serif,sans-serif;}
p{margin:;padding:5px 10px;background:#eee;}
h1{margin:10px 0;font-size:16px;}
.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}
.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}
html代码:
<h1>列数及列宽固定:</h1>
<div class="test">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
<h1>列宽固定,根据容器宽度液态分布列数:</h1>
<div class="test2">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
结果如图所示:
以下列出column运用的相关属性
1.column-width:<length> | auto
设置或检索对象每列的宽度
如:-moz-column-width:200px;
2.column-count:<integer> | auto
设置或检索对象的列数
如:-webkit-column-count:3;
3.column-gap:<length> | normal
设置或检索对象的列与列之间的间隙
如:column-gap:normal;column-gap:40px;
4.column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]
设置或检索对象的列与列之间的边框。复合属性。相当于border属性
如:column-rule:10px solid #090;
5.column-span:none | all
设置或检索对象元素是否横跨所有列。
如:column-span:all;
6.column-fill:auto | balance
设置或检索对象所有列的高度是否统一。
auto:列高度自适应内容
balance:所有列的高度以其中最高的一列统一
如:column-fill:balance;
7.column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置或检索对象之前是否断行。
auto:既不强迫也不禁止在元素之前断行并产生新列
always:总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列
8.column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置或检索对象之后是否断行。
auto:既不强迫也不禁止在元素之后断行并产生新列
always:总是在元素之后断行并产生新列
avoid:避免在元素之后断行并产生新列
9.column-break-inside:auto | avoid | avoid-page | avoid-column
设置或检索对象内部是否断行。
auto:既不强迫也不禁止在元素内部断行并产生新列
avoid:避免在元素内部断行并产生新列
其实常用的也就前面5条。
css3中的多列布局columns详解的更多相关文章
- CSS3之多列布局columns详解
CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...
- CSS3布局之多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
- CSS3中的弹性流体盒模型技术详解
先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...
- CSS3中-webkit-overflow-scrolling: touch 的使用方法详解
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch 使用具有回弹效果的滚 ...
- CSS3 多列布局——Columns
CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...
- 多列布局——Columns
为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...
- 160427、CSS3实战笔记--多列布局
通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5 多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- ExtJs常用布局--layout详解(含实例)
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
随机推荐
- sso demo ( cas )
1. generate keystore command : keytool -genkey -alias testtomcat -keyalg RSA -keystore "C:\User ...
- 批处理清除VisualStudio解决方案文件夹
有很多次我们需要手工来删除bin, obj这样的文件夹.这些文件夹是由Visual Studio编译项目时生成的,其中包括了当前项目的程序集.一个解决方案会包含好多个项目了,那么就有很多这样 ...
- C#生成条形码 Code128算法
条形有很多种,Code128是比较常用的一种,是一种高密度条码, CODE128 码可表示从 ASCII 0 到ASCII 127 共128个字符,故称128码.其中包含了数字.字母和符号字符. Co ...
- Android 开关按钮切换,类似于iphone 效果,view实现
1.实现的效果 gitHub : https://github.com/zcweng/ToggleButton
- Android项目实战(二):安卓应用程序退出的三种方法
现在的APP退出的时候都不是让用户点击了“后退键”就退出.防止用户点错了后退键而造成的用户体检不好. 一年前搞的Demo代码不见了,重新写下就当是复习和以后直接拿来用把 目前流行的解决一般分为两种: ...
- Dataset的基本操作
创建一个dateset并往其中加入列 DataSet dsClass = new DataSet(); DataTable dtClass = new DataTable("Class&qu ...
- android 音乐播放器简单实现
package com.zhangbz.musicplayer; import java.io.File; import android.app.Activity; import android.me ...
- 2、IOS开发--iPad之仿制QQ空间 (初始化HomeViewController子控件视图)
1.先初始化侧边的duck,效果图: 实现步骤: 2.然后初始化BottomMenu,效果: 步骤: 其实到这里,会出现一个小bug,那就是: 子控件的位置移高了,主要原因是: 逻辑分析图: 问题解决 ...
- 分享jstl实现分页,类似百度分页
<c:if test=" ${requestScope.curPage <= 0}"> </ c:if> < c:if test=" ...
- 《笨办法学python第三版》习题26,原错误代码及正确代码
#import ex25 1 def break_words(stuff): """This function will break up words for us.&q ...