列布局。
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper{
display:-webkit-box;//chrome
display:-moz-box;
width:100%;
}
.col{
width:33%;//对于火狐还只能用300px这种固定大小。估计要自己计算了
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p>
<div class="newspaper">
<div class="col">
人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格
每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和
0.25元。
此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的
。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因
素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美
元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上
涨幅度已超过4%，达到国内成品油价格调整的边界条件。
</div>
<div class="col">
通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、
林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定
，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运
）价格不作调整。
</div>
<div class="col" >
通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调
和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政
策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。
</div>
</div>
</body>
</html>
文章分栏显示使用
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
分享到：
相关推荐
HTML5和CSS3是现代网页开发的核心技术，它们在页面布局方面提供了强大的功能和灵活性。HTML5作为结构化的标记语言，负责定义网页内容的结构，而CSS3则用于设计和控制网页的样式、布局和动画效果。下面我们将深入探讨...
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建动态、交互性强且视觉效果丰富的网页提供了强大的支持。在"HTML5+CSS3实现3d室内布局源码"这个项目中，我们可以深入探讨这两项技术如何应用于创建三维室内设计...
### 多列布局的艺术：CSS 多列布局完全指南 #### 一、引言 CSS（Cascading Style Sheets，层叠样式表）是网页设计领域的重要组成部分，它赋予了网页丰富的样式和灵活的布局能力。CSS 的核心功能涵盖了布局控制、...
此外，通过实际案例，读者将学习如何结合CSS3的新功能，如多列布局、渐变、阴影、边框半径、转换和动画，以提升网页的视觉效果和用户体验。 最后，"HTML5与CSS3设计模式"关注的是这两种技术的创新设计思路。设计...
3. **多列布局**：column-count和column-gap等属性支持多列布局，解决了传统浮动布局的局限。 4. **Flexbox布局**：弹性盒模型提供了灵活的容器布局，可以自动调整元素大小和位置，适应不同屏幕尺寸。 5. **Grid...
CSS3则为页面样式提供了更为丰富的选择，包括动画（Animations）、过渡（Transitions）、多列布局（Multi-column Layout）、Flexbox（弹性盒模型）和Grid（网格布局）等。这些特性使得开发者能够创建出更为复杂且...
3. 多列布局：column-count、column-gap等属性，让创建多列布局变得简单。 4. 背景与边框：支持背景图片裁剪和平铺，以及线性渐变(linear-gradient)和径向渐变(radial-gradient)。 5. 动画与过渡：通过keyframes和...
本篇文章将深入探讨HTML5 CSS3响应式布局的概念、设计流程以及实现响应式布局的三种主要手段。 响应式布局的核心理念在于“一处设计，四处适用”，它允许网页根据访问设备的屏幕大小和方向自动调整布局、内容和样式...
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉效果惊艳的网页提供了无限可能。在这个“html5+css3源码”压缩包中，包含的“biaobai”文件很可能是实现了一款程序员专属的表白页面。下面我们将...
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉效果出色的网页提供了强大的工具。《HTML5与CSS3基础教程 第八版 中文版》是一本全面介绍这两个技术的书籍，旨在帮助初学者快速入门，并提供给...
CSS3还支持文字阴影、自定义字体(@font-face)以及多列布局(column layout)，使得设计更加个性化且易于阅读。 在实际应用中，HTML5和CSS3的结合可以创建出互动性强、视觉效果出众的网页，如拖放功能、地理定位、表单...
5. **百分比宽度**：通过设置元素的`width`属性为百分比，可以让元素的宽度相对于其父元素自动调整，实现自适应的三列布局。 6. **响应式设计**：结合媒体查询（Media Queries），可以根据不同的设备屏幕尺寸应用...
CSS3引入了模块化发展，包括选择器扩展（如nth-child、attribute selectors）、过渡（transitions）、动画（animations）、多列布局（multi-column layout）、Flexbox（弹性盒布局）和Grid（网格布局），使设计更加...
CSS3引入了多个新模块，如选择器（如:nth-child()、:not()等），多列布局，媒体查询（实现响应式设计），动画和过渡效果，以及阴影和渐变等视觉效果。CSS3的模块化设计允许开发者根据需求选择性地使用新特性，提高了...
《从零开始学HTML5+CSS3》是一本旨在帮助初学者掌握现代网页开发核心技术的教程。这本书包含HTML5和CSS3的详细讲解，以及配套的实战代码示例，覆盖了从基础知识到高级特性的全面内容。以下是针对这两个重要技术的...
CSS3 设计多列布局案例 本文档给出了 CSS3 设计多列布局相关案例，通过使用 columns 属性...本案例展示了如何使用 CSS3 设计多列布局，并应用了多种知识点，例如 columns 属性、CSS3 选择器、HTML5 结构、样式继承等。
《html5与css3实战指南》由11章和3个附录组成，内容包括html5和css3简介、html5标记、html5语义、html5表单、html5音频和视频、css3渐变和多背景、css转换和过渡、嵌入字体和多列布局、地理定位、离线web应用和web...
2. **多列布局**：通过`column-count`、`column-gap`等属性，可以轻松实现多列布局，改善网页排版。 3. **边框和背景**：新增了圆角边框、渐变背景、阴影效果等，使界面设计更加美观。 4. **定位和布局**：Flexbox...
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉效果吸引人的网页提供了强大的工具。在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个...