Multicolumn Layouts
The multicolumn lays out content in multiple vertical columns.
Property | Description Values |
---|---|
column-count | ideal number of columns. |
column-fill | how the content should be distributed between columns. balance value fills column evenly, auto value fills columns sequentially. |
column-gap | distance between columns. |
column-rule | Shorthand property for setting the column-rule-* properties, the format is <width> <style> <color> |
column-rule-color | the rule color. |
column-rule-style | the rule style, the allowed values are the same with the border style |
column-rule-width | the rule width. |
columns | Shorthand property for setting the column-span and column-width properties, format: <length> <number> |
column-span | how many columns an element should span(none or all) |
column-width | the width of the columns |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
column-count: 3;
column-fill: balance;
column-rule: medium solid black;
column-gap: 1.5em;
}
img {
float: left;
border: medium double black;
background-color: lightgray;
padding: 2px;
margin: 2px;
}
</style>
</head>
<body>
<p>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
<img src="http://java2s.com/Book/HTML-CSSImages/star.png" alt="large"/>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
<img src="http://java2s.com/Book/HTML-CSSImages/star.png" alt="small"/>
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed
in a web browser(From From Wikipedia, the free encyclopedia).
</p>
</body>
</html>