用CSS3生成多列文本流

zlpx

浏览: 153020 次
性别:
来自: 北京

最近访客更多访客>>

dragonsky_w

whatl

zhangbody

xy14qg

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css
HTML5

css html5

下面的例子展示了你如何生成多列文字的布局。通过设置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

分享到：

用CSS3在一个容器中使用特定的圆角 | 用HTML5的本地存储功能

2012-03-18 22:51
浏览 1100
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用CSS3生成多列文本流

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用CSS3生成多列文本流

评论

发表评论

相关推荐

在JS中利用arrays 排序

在HTML列表上动态改变列表位置风格

在HTML列表上改变列表位置风格

在HTML对象上应用多个class Name

使用CSS3生成简单的属性动画

使用CSS3生成一个inset盒子阴影（带透明度）

使用CSS3生成一个inset盒子阴影

使用AJAX和XMLHttpRequest动态加载内容

使用CSS3生成简单的box影子

将javascript对象转换为JSON字符串

在HTML的text input控件获取焦点时设置背景颜色

在HTML5中定制数据属性

在HTML5中自动设置Form的焦点

用CSS3设置P的对齐方式

用CSS3设置text元素的大小写

使用CSS3建立不可选的的文字

在HTML5中使用Form新的input types

在容器内使用CSS设置背景颜色

用CSS3在一个容器中使用特定的圆角

用HTML5的本地存储功能

最近访客更多访客>>