047_CSS3多列

最新推荐文章于 2024-09-06 15:49:09 发布

原创最新推荐文章于 2024-09-06 15:49:09 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

本文介绍如何使用CSS3创建类似报纸的多列文本布局效果。重点讲解了column-count、column-gap、column-rule等属性，并提供了示例代码及效果展示。

1. 通过CSS3, 您能够创建多个列来对文本进行布局, 就像报纸那样!

2. 新的多列属性

3. column-count属性

3.1. column-count 属性规定元素应该被划分的列数。

3.2. 默认值

3.3. 可能值

4. column-gap属性

4.1. column-gap属性规定列之间的间隔。

4.2. 如果列之间设置了column-rule, 它会在间隔中间显示。

4.3. 默认值

4.4. 可能值

5. column-rule属性

5.1. column-rule属性是一个简写属性, 用于设置column-rule-width、 column-rule-style和column-rule-color属性。

5.2. column-rule属性设置列的宽度、样式和颜色规则。

5.3. 语法

column-rule: column-rule-width column-rule-style column-rule-color;

5.4. 默认值

5.5. 可能值

6. column-rule-color属性

6.1. column-rule-color属性规定列之间的颜色规则。

6.2. 默认值

6.3. 可能值

7. column-rule-style属性

7.1. column-rule-style属性规定列之间的样式规则。

7.2. 默认值

7.3. 可能值

8. column-rule-width属性

8.1. column-rule-width属性规定列之间的宽度规则。

8.2. 默认值

8.3. 可能值

9. column-span属性

9.1. column-span属性规定元素应横跨多少列。

9.2. 默认值

9.3. 可能值

10. column-width属性

10.1. column-width属性规定列的宽度。

10.2. 默认值

10.3. 可能值

11. columns属性

11.1. columns属性是一个简写属性, 用于设置列宽和列数。

11.2. 语法

columns: column-width column-count;

11.3. 默认值

11.4. 可能值

12. 例子

12.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3 多列</title>
		<meta charset="utf-8" />

		<style type="text/css">
			.newspaper {
				width: 680px;
				background-color: green;
				columns: 200px 3;
				/*column-width: 200px;
				column-count: 3;*/
				column-gap: 40px;
				column-rule: 3px outset #ff0000;
				/*column-rule-width: 3px;
				column-rule-style: outset;
				column-rule-color: #ff0000;*/
			}
			h2 {
				column-span: all;
			}
		</style>
	</head>
	<body>
	<div class="newspaper">
		<h2>汽、柴油价格</h2>
		人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。

		此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。

		通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。

		通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
		</div>
</body>
</html>

12.2. 效果图