CSS3多列column-count属性

ID:13266 / 打印

css3的多列column-count属性用于计算元素应该被分成的列数。

您可以尝试运行以下代码来使用CSS实现column-count属性:

示例

演示

<html>    <head>       <style>          .multi {             /* Column count property */             -webkit-column-count: 4;             -moz-column-count: 4;             column-count: 4;              /* Column gap property */             -webkit-column-gap: 40px;             -moz-column-gap: 40px;             column-gap: 40px;              /* Column style property */             -webkit-column-rule-style: solid;             -moz-column-rule-style: solid;             column-rule-style: solid;          }       </style>    </head>    <body>       <div class = "multi">          Tutorials Point originated from the idea that there exists a class of readers who respond          better to online content and prefer to learn new skills at their own pace from the comforts          of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and          elated by the response it generated, we worked our way to adding fresh tutorials to our          repository which now proudly flaunts a wealth of tutorials and allied articles on topics          ranging from programming languages to web designing to academics and much more.       </div>    </body> </html>

输出

CSS3多列column-count属性

上一篇: CSS 自我对齐属性
下一篇: 使用 CSS 淡入淡出动画效果

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。