天天看点

HTML5+CSS3+JS学习笔记-13-CSS3多列

今天学了CSS3多列的用法,文字内容也可以分列显示。

截图:

HTML5+CSS3+JS学习笔记-13-CSS3多列

代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>CSS3多列</title>

<style type="text/css">

div {

-webkit-column-count: 3;

-moz-column-count: 3;

column-count: 3;

-webkit-column-gap: 40px;

-moz-column-gap: 40px;

column-gap: 40px;

-webkit-column-rule-style: solid;

-moz-column-rule-style: solid;

column-rule-style: solid;

-webkit-column-rule-width: 2px;

-moz-column-rule-width: 2px;

column-rule-width: 2px;

-webkit-column-rule-color: red;

-moz-column-rule-color: red;

column-rule-color: red;

-webkit-column-rule: 3px solid red;

-moz-column-rule: 3px solid red;

column-rule: 3px solid red;

-webkit-column-width: 100px;

column-width: 100px;

}

</style>

</head>

<body>

<div>测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234测试1234</div>

</body>

</html>

继续阅读