The column-span property is used to span the content over multiple columns, while the column-fill property is used to equally balance the content of an element in all the specified columns.
Now here we create a Web page named columnspanfill.html
<!doctype html>
<head>
<title>column-span and column-fill properties</title>
<style type="text/css">
h1{-webkit-column-span:all;background-color:silver;}
body{
backgound-color:purple;
border:lime 10px solid;
-webkit-column-count:3;
-webkit-column-rule:10px solid cyan;
-webkit-column-fill:balanced;
}
</style>
</head>
<body>
column-span and column-fill column-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fill
<h1>This heading for all columns</h1>
column-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fill
</body>
</html>
The output of the above web page:
Now here we create a Web page named columnspanfill.html
<!doctype html>
<head>
<title>column-span and column-fill properties</title>
<style type="text/css">
h1{-webkit-column-span:all;background-color:silver;}
body{
backgound-color:purple;
border:lime 10px solid;
-webkit-column-count:3;
-webkit-column-rule:10px solid cyan;
-webkit-column-fill:balanced;
}
</style>
</head>
<body>
column-span and column-fill column-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fill
<h1>This heading for all columns</h1>
column-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fillcolumn-span and column-fill
</body>
</html>
The output of the above web page:
Here the content of the body element is displayed in three columns. The content of the h1 element is spanned over all three columns, and columns are filled equally.
No comments:
Post a Comment