css3 设置多列布局

有时候我们会遇到设置一段文字进行多列展示出来，这个时候我们一般会采取column-XX属性的相关属性去实现，改属性一共有一下的设置方式。

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper
{-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;-moz-column-rule-style:outset; /* Firefox */
-webkit-column-rule-style:outset; /* Safari and Chrome */
column-rule-style:outset;-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;
}
</style>
</head>
<body><p><b>注释：</b>Internet Explorer 不支持 column-rule-color 属性。</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>

运行结果：

css3 设置多列布局相关推荐

CSS3之多列布局columns学习
CSS3之多列布局columns学习基本属性如下: 1. columns: column-width column-count 2. column-width:length | auto 3. co ...
html设置多列布局间隙,css设置多列等高布局的方法示例
1.真实等高布局 flex技术点:弹性盒子布局flex,默认值就是自带等高布局的特点. 定义flex布局的时候,有一些默认值. flex-direction属性定义主轴的方向.默认值为row,一般是水 ...
css3 多列布局使用
css3的出现,解决了不少前端的问题,比如动画,圆角等: 这里总结一下css3 的多列布局: w3c上给出了很多属性: 我们一般用到column-count.column-gap.column-wid ...
1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维
CSS3 教程多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维介绍 CSS3 是层叠样式表(Cascading Style S ...
神奇的Css3（3）多列布局
六.columns 多列布局为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module) ...
HTML5column属性布局页脚,利用column多列属性调整页面文字列布局
column多列属性 column-count:栏目数兼容性写法: CSS Code复制内容到剪贴板 -webkit-column-count:3 -moz-column-count:3 colum ...
CSS3 多列布局的跨列
默认情况下,多列容器中的内容,会一列一列地自动填充.但有时候,却需要其中的某些内容(如,文章标题)不是多列布局,而是横跨所有列. 要实现类似报纸.杂志上的跨列效果,就可以使用 column-span属 ...
html中如何多列布局,CSS3 多列布局
CSS3 多列布局使用CSS3,您可以将元素的文本内容分成多列. 创建多列布局 CSS3引入了多列布局模块,用于以简单有效的方式创建多个列布局.现在,您无需使用浮动框即可创建像在杂志和报纸上看到的布 ...
css3多列布局(columnz)，多列布局相关属性
Css3多列布局(columns) 为什么会出现多列布局? 当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行:人们的视点从文本的一端移到另一端.然后换到下一行的行首,如果眼球移动浮动过大, ...

css3 设置多列布局

css3 设置多列布局相关推荐

最新文章

热门文章