利用css代码实现多行代码的分列显示
使布局更加合理美观
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多列</title>
<link rel="stylesheet" href="stylecolume.css" type="text/css" />
</head>
<body>
<div>
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
你好,欢迎来到燕子的世界 你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界你好,欢迎来到燕子的世界
</div>
</body>
</html>
div{
/*分四列*/
column-count: 4;
-moz-column-count: 4;
/*列间隔距离*/
column-gap: 30px;
-moz-column-gap: 30px;
/*分割线*/
column-rule: 5px outset #ff0000;
-moz-column-rule: 5px outset #ff0000;
}
效果显示图如下所示: