Home >Web Front-end >Front-end Q&A >How to use css column-count attribute
How to use css column-count attribute
- 青灯夜游Original
- 2019-05-29 09:51:433669browse
css column-count attribute is used to specify the number of columns an element should be divided into. If the number of columns is given, the browser will distribute the content evenly within the exact same number of columns. For example, if column-count:3 is set, the content in the element will be displayed in 3 columns.
How to use the css column-count attribute?
The column-count attribute specifies the number of columns by which the element should be divided.
Syntax:
column-count: number|auto;
Attribute value:
● Number: The optimal number of columns that the element content will be divided into, Make the content of the elements unable to flow out.
●auto: The number of columns will depend on other properties, such as: "column-width"
Note: Internet Explorer 10 and Opera support the column-count property. Firefox supports an alternative -moz-column-count property. Safari and Chrome support an alternative -webkit-column-count property. Internet Explorer 9 and earlier browsers do not support the column-count attribute.
css column-count attribute example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p>
<div class="newspaper">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。</div>
</body>
</html>Rendering:
The above is the detailed content of How to use css column-count attribute. For more information, please follow other related articles on the PHP Chinese website!