CSS3 supported multi columns to arrange the text as news paper structure.
Some of most common used multi columns properties as shown below −
| Sr.No. | Value & Description |
|---|---|
| 1 |
column-count
Used to count the number of columns that element should be divided.
|
| 2 |
column-fill
Used to decide, how to fill the columns.
|
| 3 |
column-gap
Used to decide the gap between the columns.
|
| 4 |
column-rule
Used to specifies the number of rules.
|
| 5 |
rule-color
Used to specifies the column rule color.
|
| 6 |
rule-style
Used to specifies the style rule for column.
|
| 7 |
rule-width
Used to specifies the width.
|
| 8 |
column-span
Used to specifies the span between columns.
|
Example
Below example shows the arrangement of text as new paper structure.
<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"> Learn Software 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>
For suppose, if user wants to make text as new paper without line, we can do this by removing style syntax as shown below −
.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; }
No comments:
Post a Comment