博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css3学习 理论之多列布局
阅读量:6086 次
发布时间:2019-06-20

本文共 893 字,大约阅读时间需要 2 分钟。

例子:columns: 250px 3;250px表示的是列宽,3表示的是多列的数目。

也可以只指定列宽,column-width:300px;-moz-column-width:300px;-webkit-column-width:300px; 网页中每个栏目的最大宽度为300像素;根据窗口宽度自动调整几栏显示。

同样可以只指定列数,column-count:3;-moz-column-count:3;-webkit-column-count:3; 根据窗口宽度自动调整列宽。

 

column-gap,列间距,column-gap:3em;-moz-column-gap:3em;-webkit-column-gap:3em; 定义列间距为3em,默认为1em。

column-rule,列边框样式,例如:column-rule:dashed 2px gray;-moz-column-rule:dashed 2px gray;-webkit-column-rule:dashed 2px gray;定义列边框为2像素宽的灰色虚线。column-rule:solid 5px blue;-moz-column-rule:solid 5px blue;-webkit-column-rule:solid 5px blue;定义列边框为5像素宽的蓝色实线。

column-span,定义跨列显示,取值只能是1或者all,当是1 的时候,就意味着只在本栏显示,而取all的时候,将横跨所有列,并定位在列的Z轴之上。column-span:all;-moz-column-span:all;-webkit-column-span:all; 

column-fill,定义栏目高度是否统一,取值只能是auto或者balance,设置auto时,各列的高度随其内容的变化而自动变化。设置为balance时,高度统一。

学习学习。。O(∩_∩)O~

转载于:https://www.cnblogs.com/xiaobudiandian/archive/2011/12/18/2291713.html

你可能感兴趣的文章
初步实现GoQtTemplate
查看>>
全球 IP 地址分析报告公布:阿里云全球占比第二
查看>>
DES 加密 解密
查看>>
MJRefresh (Footer ) API
查看>>
猫抓老鼠——实验吧
查看>>
.Net平台技术栈?不止于此
查看>>
PageHelper分页插件及通用分页js
查看>>
区块链开发公司谈区块链技术如何解决教育行业痛点
查看>>
Swift38/90Days - 用 Swift 开发 Mac App 1 / 3
查看>>
微软发布 .NET for Apache Spark 首个预览版
查看>>
Fedora 32 将移除 Python 2 及其软件包
查看>>
Java_异常_02_java.lang.NoClassDefFoundError: org/apache/log4j/Level
查看>>
在线表格 x-spreadsheet 1.0.16 发布
查看>>
Windows IIS服务器建站/网站配置全图文流程(新手必备!) 一条龙
查看>>
[Git日记](1)Git安装
查看>>
Hadoop笔试题一
查看>>
微信小程序之生成图片分享
查看>>
Java微信公众平台开发_04_自定义菜单
查看>>
Python网络编程(进程通信、信号、线程锁、多线程)
查看>>
C#/VB.NET设置Excel表格背景色
查看>>