multi-column多列布局

最新推荐文章于 2024-04-24 14:35:03 发布

weixin_34358092

最新推荐文章于 2024-04-24 14:35:03 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/tyxloveyfq/p/4317883.html

版权

前言

　　CSS3的多列布局(multi-column)，主要用来实现文本的多列布局，类似于报刊杂志的排版。之前要实现文字的多列排版是非常麻烦的(手动拆分，绝对定位，JS脚本)，但是有了多列布就显得轻松多了。

　　兼容性：IE10、firefox、chrome、opera、safari

相关属性

1、column-count：设置multi的列数。

　　取值：

　　　　①、auto：默认值，列数由column-width决定。

　　　　②、数字：正整数

2、column-width：设置multi的列宽。

　　取值：

　　　　①、auto：默认值，列数由column-count决定。

　　　　②、宽度：宽度值

　　NOTE：当同时设置column-count和column-width时，列数由column-count决定。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>multi-column</title>
 6   <style>
 7     body, p {
 8       margin: 0;
 9       padding: 0;
10       font: 12px/1.5 "Microsoft YaHei";
11     }
12     .wrap {
13       -webkit-column-count: 2;
14       -webkit-column-width: 100px;
15 
16       background: pink;
17       width: 500px;
18       margin: 50px auto;
19     }
20   </style>
21 </head>
22 <body>
23   <div class="wrap">
24     <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
25     <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
26     <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
27   </div>
28 </body>
29 </html>

View Code

3、columns：同时设置multi的列宽和列数。

　　取值：

　　　　①、列宽和列数：参考 column-width 和 column-count

4、column-gap：设置列之间的间距。

　　取值：

　　　　①、normal：和font-size相同

　　　　②、宽度：宽度值(不能取负值)

　　NOTE：

　　　　在同时设置了 column-width 和 column-gap 后column-width的值会动态调整。

　　　　在同时设置了 column-width 和 column-count column-gap后，会保证gap值，后动态调整width和count(当gap+width超过了列最大宽度，count会相应减少来适应)。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>multi-column</title>
 6   <style>
 7     body, p {
 8       margin: 0;
 9       padding: 0;
10       font: 12px/1.5 "Microsoft YaHei";
11     }
12     .wrap {
13       -webkit-column-count: 3;
14       -webkit-column-width: 150px;
15       -webkit-column-gap: 100px;
16       background: pink;
17       width: 500px;
18       margin: 50px auto;
19     }
20   </style>
21 </head>
22 <body>
23   <div class="wrap">
24     <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
25     <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
26     <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
27   </div>
28 </body>
29 </html>

View Code

5、column-rule：设置列与列之间的边框，边框会以gap的中心向两边扩散可到内容区域。

　　取值：

　　　　复合属性，参考border。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>multi-column</title>
 6   <style>
 7     body, p {
 8       margin: 0;
 9       padding: 0;
10       font: 12px/1.5 "Microsoft YaHei";
11     }
12     .wrap {
13       -webkit-column-count: 3;
14       -webkit-column-width: 140px;
15       -webkit-column-gap: 40px;
16       -webkit-column-rule: 100px solid #CCC;
17       background: pink;
18       width: 500px;
19       margin: 50px auto;
20     }
21   </style>
22 </head>
23 <body>
24   <div class="wrap">
25     <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
26     <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
27     <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
28   </div>
29 </body>
30 </html>

View Code

6、column-span：定义分列元素的子元素能跨多少列。

　　取值：

　　　　①、none：默认值，不跨列

　　　　②、all：跨越所有列

　　NOTE：gap不会出现在跨越所有列的子元素上。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>multi-column</title>
 6   <style>
 7     body, p {
 8       margin: 0;
 9       padding: 0;
10       font: 12px/1.5 "Microsoft YaHei";
11     }
12     .wrap {
13       -webkit-column-count: 3;
14       -webkit-column-width: 140px;
15       -webkit-column-gap: 40px;
16       -webkit-column-rule: 10px solid #CCC;
17       background: pink;
18       width: 500px;
19       margin: 50px auto;
20     }
21     h1 {
22       -webkit-column-span: all;
23       text-align: center;
24     }
25   </style>
26 </head>
27 <body>
28   <div class="wrap">
29     <h1>出师表</h1>
30     <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
31     <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
32     <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
33   </div>
34 </body>
35 </html>

View Code

　　NOTE：跨列子元素在子元素的中间的表现如下。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="zh-cn">
 4   <meta charset="UTF-8">
 5   <title>multi-column</title>
 6   <style>
 7     body, p {
 8       margin: 0;
 9       padding: 0;
10       font: 12px/1.5 "Microsoft YaHei";
11     }
12     .wrap {
13       -webkit-column-count: 3;
14       -webkit-column-width: 140px;
15       -webkit-column-gap: 40px;
16       -webkit-column-rule: 10px solid #CCC;
17       background: pink;
18       width: 500px;
19       margin: 50px auto;
20     }
21     h1 {
22       -webkit-column-span: all;
23       text-align: center;
24     }
25   </style>
26 </head>
27 <body>
28   <div class="wrap">
29     <p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
30 
31     <h1>出师表</h1>
32     <p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
33     <p>侍中侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
34   </div>
35 </body>
36 </html>

View Code

7、column-break-after：确定分栏符是否可以或应该发生在多列布局中的一个元素后

8、column-break-before：确定一个分栏符是否可以或者应该发生在多列布局中的一个元素前

9、column-break-inside：确定一个分栏符是否避免在一个多流布局内部断开

转载于:https://www.cnblogs.com/tyxloveyfq/p/4317883.html

weixin_34358092

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
multi-column多列布局

前言　　CSS3的多列布局(multi-column)，主要用来实现文本的多列布局，类似于报刊杂志的排版。之前要实现文字的多列排版是非常麻烦的(手动拆分，绝对定位，JS脚本)，但是有了多列布就显得轻松多了。　　兼容性：IE10、firefox、chrome、opera、safari相关属性1、column-count：设置multi的列数。　　取值：　　　　...
复制链接

扫一扫