CSS3--column-span

code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>column-span</title>
<style type="text/css">
body { font: 14px/1.5 georgia, serif, sans-serif; }
p { margin: 0; padding: 5px 10px; background: #eee; }
h1 { margin: 10px 0; font-size: 16px; }
.text {
    width: 600px;
    font-size: 12px;
    border: 10px solid #000;
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-rule: 10px solid red;
       -moz-column-rule: 10px solid red;
            column-rule: 10px solid red;
}
.text > p:nth-of-type(2) {
    -webkit-column-span: all;
       -moz-column-span: all;
            column-span: all;
}
.text2 {
    width: 600px;
    font-size: 12px;
    border: 10px solid #000;
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-rule: 10px solid red;
       -moz-column-rule: 10px solid red;
            column-rule: 10px solid red;
}
.text2 > p:nth-of-type(2) {
    -webkit-column-span: none;
       -moz-column-span: none;
            column-span: none;
}
</style>
</head>
<body>
<h1>column-span: all;</h1>
<div class="text">
  <p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
  <p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
  <p>慕课网秉承“开拓、创新、公平、分享”的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
<h1>column-span: none;</h1>
<div class="text2">
	<p>慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术。</p>
	<p>慕课网课程涵盖前端开发、PHP、Html5、Android、iOS、Swift等IT前沿技术语言，包括基础课程、实用案例、高级分享三大类型，适合不同阶段的学习人群。以纯干货、短视频的形式为平台特点，为在校学生、职场白领提供了一个迅速提升技能、共同分享进步的学习平台。</p>
	<p>慕课网秉承“开拓、创新、公平、分享”的精神，将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>
</div>
</body>
</html>
effect:
猜你喜欢
