下面的例子展示了你如何生成多列文字的布局。通过设置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>源码下载：
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
