A Multiple Columns is such an advance feature of CSS3 which is used for creating the newspaper layout. You can create your articles to Multiple Columns, even if it is in one paragraph.
There are three properties of CSS3 Multiple Columns that is used to make the proper layout, what you want to do. The all measure browsers support Multiple Column properties except of Internet Explorer.
The three properties of CSS3 Multiple Columns has been described as follows:
✔ column-count
✔ column-rule
✔ column-gap
Where column-count defines the number of columns, column-rule defines the line style between the columns and the column-gap defines the gap (blank spaces) between the columns.
column.html
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#multiple_columns
{
text-align:justify;
column-count:3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule: 2px solid #6AAFCF;
-webkit-column-rule: 2px solid #6AAFCF;
-moz-column-rule: 2px solid #6AAFCF;
column-gap: 40px;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
}
</style>
</head>
<body>
<div id="multiple_columns">
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
</div>
</body>
</html>
The output shows like
There are three properties of CSS3 Multiple Columns that is used to make the proper layout, what you want to do. The all measure browsers support Multiple Column properties except of Internet Explorer.
The three properties of CSS3 Multiple Columns has been described as follows:
✔ column-count
✔ column-rule
✔ column-gap
Where column-count defines the number of columns, column-rule defines the line style between the columns and the column-gap defines the gap (blank spaces) between the columns.
column.html
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#multiple_columns
{
text-align:justify;
column-count:3;
-webkit-column-count: 3;
-moz-column-count: 3;
column-rule: 2px solid #6AAFCF;
-webkit-column-rule: 2px solid #6AAFCF;
-moz-column-rule: 2px solid #6AAFCF;
column-gap: 40px;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
}
</style>
</head>
<body>
<div id="multiple_columns">
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
The quick brown fox jumps over a right lazy dog.
</div>
</body>
</html>
The output shows like
No comments:
Post a Comment