The column-width property describes the width of columns in multicol elements, while the column-count property describes the number of columns of the element.
Create a Web page, named columnwidthcount.html to use the column-width and column-count properties.
<!doctype html>
<body>
<p style="backround:#0076FF;border-width:1em;border-style:outset;border-color:red;-webkit-column-count:3;-webkit-column-width:200px;">
column width count column width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width count
</p>
<p style="backround:#0076FF;border-width:1em;border-style:outset;border-color:green;-webkit-column-count:2;-webkit-column-width:200px;">column width count column width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width
countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width
countcolumn width count
</p>
</body>
</html>
The output of the columnwidthcount.html file:
Create a Web page, named columnwidthcount.html to use the column-width and column-count properties.
<!doctype html>
<body>
<p style="backround:#0076FF;border-width:1em;border-style:outset;border-color:red;-webkit-column-count:3;-webkit-column-width:200px;">
column width count column width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width count
</p>
<p style="backround:#0076FF;border-width:1em;border-style:outset;border-color:green;-webkit-column-count:2;-webkit-column-width:200px;">column width count column width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width
countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width countcolumn width
countcolumn width count
</p>
</body>
</html>
The output of the columnwidthcount.html file:
No comments:
Post a Comment