您的位置：首页 > Web前端 > CSS

css-多列显示

2016-03-06 18:15 453 查看
利用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;
}


效果显示图如下所示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航