CSS3之多列布局columns学习

  • 基本属性如下：
    • 1. columns: column-width column-count
    • 2. column-width：length | auto
    • 3. column-count：number | auto
    • 4. column-gap: normal | length
    • 5. column-rule：column-rule-width column-rule-style column-rule-color
    • 6. column-span：none | all
    • 7. column-fill：auto | balance
    • 8. column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
    • 9. column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
    • 10. column-break-inside：auto | avoid | avoid-page | avoid-column
  • 浏览器支持：
  • DEMO：
    • 1.列表瀑布流排版
    • 2.文字瀑布流排版

CSS3提供了个新属性columns用于多列布局。

基本属性如下：

1. columns: column-width column-count

复合属性：设置对象的列数和每列的宽度。

/*列数及列宽固定*/
-moz-columns: 200px 3;
-webkit-columns: 200px 3;
columns: 200px 3;/*列宽固定，根据容器宽度液态分布列数*/
-moz-columns: 200px;
-webkit-columns: 200px;
columns: 200px;
2. column-width：length | auto

设置对象的宽度；使用像素表示。

  • auto：根据column-count自定分配宽度。
/*列宽固定，根据容器宽度液态分布列数*/
-moz-column-width: 200px;
-webkit-column-width:  200px;
column-width: 200px;
3. column-count：number | auto

用来定义对象中的列数，使用数字 1-10表示。

  • auto：根据column-width自定分配宽度。
/*列数固定，根据容器宽度液态分布列宽*/
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
4. column-gap: normal | length

设置列之间的像素差距。

  • normal：是默认值，为1em；
  • length：是用来设置列与列之间的间距。
/* 固定列间隙为40px */
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;/* 列间隙column-gap: normal；font-size为14px时，列间隙column-gap:normal的计算值也为14px */
-moz-column-gap: normal;
-webkit-column-gap: normal;
column-gap: normal;
5. column-rule：column-rule-width column-rule-style column-rule-color

复合属性：设置对象的列与列之间的边框。

  • column-rule-width：设置列中之间的宽度规则（column-rule-width: thin | medium | thick | length;）；
  • column-rule-style：设置列中之间的样式规则（column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;）；
  • column-rule-color：设置列中之间的颜色规则P（column-rule-color: color;）。

注：column-rule与border同理，这三个属性里，除style不能省略，width和color都可以省略其中之一或都省略，浏览器会使用默认的width或color。

/* 在列与列之间设置绿色间隔线 */
-moz-column-rule: 10px solid #090;
-webkit-column-rule: 10px solid #090;
column-rule: 10px solid #090;
6. column-span：none | all

设置或检索对象元素是否横跨所有列。

  • 1/none： 元素应跨越一列；
  • all： 该元素应该跨越所有列。

注：火狐浏览器不支持；

7. column-fill：auto | balance

设置对象所有列的高度是否统一。

  • auto： 列高度自适应内容；
  • balance： 所有列的高度以其中最高的一列统一。

注：主流浏览器都不支持 column-fill 属性。

8. column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

设置对象之前是否断行。

  • auto： 既不强迫也不禁止在元素之前断行并产生新列；
  • always： 总是在元素之前断行并产生新列；
  • avoid：避免在元素之前断行并产生新列。
9. column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

设置对象之后是否断行。

10. column-break-inside：auto | avoid | avoid-page | avoid-column

设置对象内部是否断行。

  • auto：既不强迫也不禁止在元素内部断行并产生新列；
  • avoid：避免在元素内部断行并产生新列；
  • column-span: none（默认值）|| all，none是不跨越任何列。all 是元素跨越所有列，并定位在列的Z轴之上。

浏览器支持：

Internet Explorer 10+ 和 Opera 支持 column-width 属性。
Firefox 支持替代的 -moz-column-width 属性。
Safari 和 Chrome 支持替代的 -webkit-column-width 属性。

注：Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。

DEMO：

1.列表瀑布流排版

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>测试</title><style type="text/css">* {margin: 0;padding: 0;}.container {width: 96%;margin: 20px auto 20px;}.waterfall {column-count: 2;-webkit-column-count: 2;-moz-column-count: 2;-ms-column-count: 2;-o-column-count: 2;column-gap: 15px;-webkit-column-gap: 15px;-moz-column-gap: 15px;-ms-column-gap: 15px;-o-column-gap: 15px;}.item {display: inline-block;width: 100%;box-sizing: border-box;padding: 1em;background-color: white;border: 1px solid #ccc;border-radius: 4px;margin-bottom: 10px;/*避免多列样式column-width布局时内容被截断、错乱1. height: 100%; overflow: auto;2. height: auto; column-break-inside: avoid;*/height: 100%;overflow: auto;}.item .box {width: 100%;padding-bottom: 1em;margin-bottom: 0.5em;background-color: #eee;}.h222 {height: 100px;}.h333 {height: 150px;}.h444 {height: 200px;}.h555 {height: 230px;}</style></head><body><div class="container"><div class="waterfall"><div class="item"><div class="box h222"></div><p>111</p></div><div class="item">222</div><div class="item"><div class="box h333"></div><p>333</p></div><div class="item"><div class="box h444"></div><p>444</p></div><div class="item"><div class="box h555"></div><p>555</p></div></div></div></body>
</html>
2.文字瀑布流排版

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>测试</title><style type="text/css">* {padding: 0;margin: 0;}body {padding: 20px;}p { padding: 5px 10px; background: #eee; }h1 { margin: 10px 0; font-size: 16px; }.test {width: 500px;border: 1px solid #000;-moz-columns: 100px 3;-webkit-columns: 100px 3;columns: 100px 3;}.test2 {border: 1px solid #000;-moz-columns: 200px;-webkit-columns: 200px;columns: 200px;}</style></head><body><h1>列数及列宽固定:</h1><div class="test"><p>It’s a normal afternoon, sunshine through the window, lazily sprinkled on the desktop. I opened the book Little Prince, in the meantime opening a magical world of tender love.</p><p>Little Prince chiefly tells of a story concerning a lonely prince who is loyal but contrary to love. On the one hand, he overly falls in love with a rose in his planet by reason that her fragrance and beauty are notably charming. On the other hand, conversely, he is too young to know how to love the proud flower. Accordingly, he eventually leaves his rose with tears in eyes. Nevertheless, the pain of separation has long concerned him during his travel along massive planets. In the course of reading the book, I gradually understood the meaning of mature love.</p></div><h1>列宽固定，根据容器宽度液态分布列数:</h1><div class="test2"><p>First and foremost, what mature love is like: mature love must be reasonable, consistent and candid. Immature love can be disturbing. What invariably occurs is that lovers often feel hurt only because they are improperly loving each other. Immature love makes them inconsistent, or even unreasonable. For instance, it’s immature love that makes the rose pretend to be strong so as to avoid being caught crying when they separate from each other; it’s immature love that makes little prince determined to leave the rose.</p><p>Additionally, immature love makes both little prince and the rose contrary. Little prince is confessional because he ought never to run away from the rose but he does. The rose confides it’s her fault that little prince has not known her love all the while.</p></div></body>
</html>

CSS3之多列布局columns学习相关推荐

  1. CSS3多列布局 columns 弹性布局 flex

    多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性 示例 含义 column-count column-count: 3; 将元素内部分割成3 ...

  2. css3中的多列布局columns详解

    columns语法:columns:[ column-width ] || [ column-count ] 设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每 ...

  3. css3 设置多列布局

    有时候我们会遇到设置一段文字进行多列展示出来,这个时候我们一般会采取column-XX属性的相关属性去实现,改属性一共有一下的设置方式. <!DOCTYPE html> <html& ...

  4. HTML5column属性布局页脚,利用column多列属性调整页面文字列布局

    column多列属性 column-count:栏目数 兼容性写法: CSS Code复制内容到剪贴板 -webkit-column-count:3 -moz-column-count:3 colum ...

  5. 1.CSS3 教程-＞ 多列布局 ＞ image模块 ＞ cssTransition 过渡 ＞ CSS Animations 动画 ＞ Transform二维

    CSS3 教程 多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维 介绍 CSS3 是层叠样式表(Cascading Style S ...

  6. css3多列布局(columnz)，多列布局相关属性

    Css3多列布局(columns) 为什么会出现多列布局? 当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行:人们的视点从文本的一端移到另一端.然后换到下一行的行首,如果眼球移动浮动过大, ...

  7. 神奇的Css3（3） 多列布局

    六.columns  多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...

  8. css3 多列布局使用

    css3的出现,解决了不少前端的问题,比如动画,圆角等: 这里总结一下css3 的多列布局: w3c上给出了很多属性: 我们一般用到column-count.column-gap.column-wid ...

  9. css3中的column属性实现多列布局和瀑布流布局

    在css3中有新增column属性可以实现页面的排版,使得页面更加整洁,现在一一为大家介绍用法以及属性值. columns:用于设置元素的列宽和列数.它是column-width和column-cou ...

最新文章

  1. angularjs解决方案之 递归模板
  2. 关于ArcMap中的地图文档单位
  3. 纪中B组模拟赛总结（2020.2.7）
  4. 迁移学习 简而言之_简而言之Java.io：22个案例研究
  5. 前端学习（3138）：react-hello-react之组件挂载流程
  6. Rust核心团队前成员Brian Anderson加入PingCAP
  7. cad设计院常用字体_趣谈 | 那些年我们看过的电气图纸（附CAD/EPLAN区别）
  8. 使用Task简化Silverlight调用Wcf
  9. oracle清理表空间文件,如何自动删除表空间的文件？
  10. 190923每日一句
  11. 阿里架构10年，头条开发2年，我终于写出了一套Java核心知识点！
  12. C#局域网桌面共享软件制作（二）
  13. 正倒向随机微分方程（FBSDE）解对初始值的依赖性
  14. c++ BYTE相关操作（字符串与BYTE，BYTE转换为8位的数组,int 转换 BYTE）
  15. 人工智能AI的春天来临，国内惊现100多元钱的机器视觉组件，即全局曝光的高速工业相机，最高可达210帧每秒。可应用于人脸识别、机器视觉、高速运动目标的图像获取。
  16. web安全之SQL注入（三）
  17. ContextCapture Master 倾斜摄影测量实景三维建模技术
  18. 近日onedrive突然消失问题的解决
  19. xmind收费与免费的区别_十年了，我终于想明白免费跟付费的区别
  20. 虚拟机能ping通，但是telnet某个端口却不行

热门文章

  1. 优惠券有什么用，为什么不直接降价呢？
  2. C语言 随机起名和记录
  3. 「双软认定」软件企业需要满足什么条件？
  4. 常见思维模型汇总（一）
  5. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（一） 之 基层数据搭建，让数据活起来（数据获取）...
  6. 一种能克服反光现象的围棋图谱可靠识别方法
  7. 下载追踪：如何监测APP的来源渠道数据
  8. 小程序实现正计时和倒计时
  9. PKUWC2019纪中游记
  10. android应用虚拟内存耗尽,GuardMalloc导致虚拟内存耗尽