下面的例子展示了你如何生成多列文字的布局。通过设置column-count 。
<!DOCTYPE html>
<html>
<head>
<title>Creating multi-column text flows using CSS3</title>
<style type="text/css">
div#d1 {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
p#p1 {
background: #F00;
}
p#p2 {
background: #0F0;
}
p#p3{
background: #00F;
}
</style>
</head>
<body>
<div id="d1">
<p id="p1">[p1] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut metus in velit dapibus gravida at egestas neque. Aliquam fermentum, orci eu consequat pellentesque, mi lacus gravida velit, vel malesuada turpis enim ut purus. Quisque non nisi augue. Sed pellentesque suscipit lacus, id laoreet est volutpat eu. Duis in lacus sem, id placerat lacus. Vivamus nulla urna, tempor quis dignissim ut, pulvinar sed nibh. Nullam bibendum facilisis lacus id suscipit. Ut eget libero sit amet risus rutrum hendrerit ac eu tellus. Nulla eu semper sem. Curabitur malesuada risus augue, bibendum posuere purus. Praesent porta, velit eu rhoncus venenatis, arcu erat sollicitudin quam, at tempor lorem enim ut dolor. Praesent id convallis eros.</p>
<p id="p2">[p2] Ut consectetur diam eu ligula tempor gravida. Donec interdum mauris rhoncus nisl ornare porta. Sed consectetur mollis enim ullamcorper mollis. Sed in interdum arcu. Duis odio metus, tincidunt tincidunt interdum sit amet, placerat a magna. Mauris mauris arcu, vehicula sit amet mattis non, rhoncus in eros. Donec lobortis volutpat porta. Cras nunc justo, tempor et varius egestas, auctor id metus. Proin sed sapien eu leo pharetra feugiat nec in tellus. Cras a sem vel nunc consectetur fringilla sit amet id libero. Phasellus neque massa, vehicula id interdum nec, lobortis sed enim.</p>
<p id="p3">[p3] Morbi imperdiet ligula et nunc blandit et tincidunt risus commodo. Nullam augue libero, posuere eu tempus id, facilisis vel odio. Suspendisse ultrices mi ac odio vulputate et lacinia augue malesuada. Vestibulum vitae enim eu tortor aliquam posuere. Vestibulum at quam sit amet metus pretium ultrices vel non magna. Vestibulum suscipit aliquet purus et gravida. Ut aliquet laoreet risus, eget congue dolor euismod et. Nullam in vestibulum leo. Suspendisse ante purus, gravida eu vestibulum a, vehicula vel dui. Mauris convallis justo sed nulla eleifend adipiscing. Suspendisse potenti. Sed scelerisque bibendum quam, eget accumsan dolor egestas eget. Morbi et urna metus. In neque lorem, sodales suscipit dapibus sit amet, suscipit eu magna. Sed sit amet ipsum sit amet est commodo pulvinar. Phasellus aliquam lacus id magna volutpat lobortis. Vestibulum ultricies scelerisque tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla pretium, ipsum eu fringilla porttitor, velit sapien auctor felis, sed pharetra erat diam at eros.</p>
</div>
</body>
</html>
源码下载：
creating-multi-column-text-flows-using-css3.zip
分享到：
相关推荐
8. **多列布局**：`column-count`和`column-gap`等属性让网页内容可以自动分成多列显示，适应不同屏幕宽度。 **CSS3代码生成器的功能** 这个免费的CSS3代码生成器可以帮助用户快速生成以下代码： 1. **选择器生成...
CSS3（Cascading Style Sheets Level 3）是Web设计领域中的一个关键技术，它扩展了CSS2.1的功能，引入了许多新的特性，如动画、阴影、渐变、多列布局、Flexbox和Grid布局等。为了帮助开发者更高效地利用CSS3，有一些...
- **多列**：实现多列布局。 - **内边距**：设置元素内部的空白区域。 - **分页媒体**：定义分页媒体的样式。 - **打印**：为打印样式提供支持。 - **Ruby**：处理Ruby注释的样式。 - **语音**：为语音合成提供样式...
3. **多列布局**：通过`column-count`, `column-gap`, `column-fill`, `column-rule`等属性实现多列布局，提升阅读体验。 **二、边框与背景** 1. **圆角边框**：使用`border-radius`可以轻松创建圆形或椭圆形的...
CSS3相较于CSS2有诸多改进和新增功能，如选择器的扩展、边框和背景的新特性、文本和字体的增强、多列布局、媒体查询以及动画和转换等。手册将帮助读者理解和掌握这些新功能，实现更高效、更美观的网页设计。 "说明...
本文将深入探讨如何使用JavaScript来创建一个类似于QQ列表的树形多列框控件，同时包含多头像生成的功能。 首先，我们要理解"树形列表"的概念。在计算机图形界面设计中，树形列表是一种数据结构，它以层次化的形式...
3. **多列布局**：CSS3的Flexbox和Grid布局系统允许设计师创建复杂的多列布局，而无需依赖传统的表格布局或者JavaScript。这使得网页内容可以更灵活地排列，适应不同的内容结构。 4. **颜色和背景**：CSS3引入了更...
首先，CSS3是层叠样式表的第三个版本，相较于之前的版本，它引入了许多新的功能和属性，如过渡（transitions）、动画（animations）、多列布局（multi-column layout）、伪元素（pseudo-elements）等，这些都在创建...
2. 多列布局：使用column-count、column-gap等属性实现多列布局。 3. 背景和边框：引入渐变、阴影、圆角、多背景等功能，提升视觉效果。 4. 动画与过渡：通过transition和animation实现平滑的过渡效果和动画。 5. ...
根据提供的文件信息，这里将基于标题“CSS3 手册 4.27版本 中文”和描述“CSS3 手册 4.27版本 中文”来生成相关的CSS3知识点。 ### CSS3 手册 4.27版本 中文 #### CSS3 简介 CSS3（Cascading Style Sheets Level 3...
这个手册包含了CSS2.0的所有特性，如选择器、盒模型、布局、颜色和背景、字体与文本、边框与边距、定位、列表、生成内容与伪元素等。通过学习这个手册，你可以了解到如何使用CSS控制网页元素的显示方式，以及如何...
CSS3则是层叠样式表的最新版本，它扩展了样式的应用范围，加入了动画、过渡、多列布局、选择器等特性。在这个世界地图效果中，CSS3可能被用来设置地图的基本样式，如背景色、边框、阴影等。更重要的是，CSS3的伪类和...
4. **多列布局**：column-count和column-gap属性使得创建杂志式的多列布局变得简单，适合展示婚纱照片或文章列表。 5. **边框与背景**：CSS3允许更复杂的边框样式，如圆角边框、渐变背景，以及阴影效果，增加了视觉...
CSS3是CSS的最新版本，它引入了许多新特性，如选择器增强、多列布局、过渡（Transitions）、动画（Animations）以及更丰富的颜色和文本处理。在这个特定的案例中，我们关注的是CSS3的过渡和动画功能，它们允许元素在...
5. 多列布局（Multi-column Layout）：虽然在这个特定案例中可能用得较少，但CSS3的多列布局可以用于创建杂志或报纸式的排版，使得内容呈现更有序。 6. CSS Transforms和Transitions：变换（Transforms）允许元素在...
CSS3是现代网页设计的重要组成部分，它的特性包括但不限于选择器增强、边框与背景的新属性、多列布局、文本阴影、渐变、过渡、动画以及3D转换等。在这个项目中，我们将特别关注3D转换和动画效果的实现。 【文件解析...
9. **CSS3新特性**：CSS3引入了多列布局、媒体查询（Media Queries）以支持响应式设计，还有渐变、阴影、动画、过渡效果等，让网页设计更加丰富和动态。 10. **选择器增强**：CSS3增加了许多新的选择器，如属性选择...
`multi-column` 创建多列布局；`table` 用于表格样式控制；`pagemedia` 适应打印等媒介的样式规则；`marquee` 用于创建滚动文本效果。 综上所述，CSS3的这些属性和功能极大地丰富了网页设计的语言，使得网页不仅在...
【标签】"css3"是指这个项目的核心技术，CSS3是层叠样式表的第三个版本，相比前两个版本，它引入了许多新的功能和改进，如选择器增强、边框与背景的更多选项、多列布局、转换（Transforms）、动画（Animations）和...