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

html css学习笔记-多列

2015-05-16 20:39 246 查看 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
          .div1{
              -webkit-column-gap: 30px;
              -moz-column-gap:30px ;
              column-gap: 30px;
              -webkit-column-count: 4;
              -moz-column-count:4 ;
              column-count: 4;
              column-rule:5px outset #ff0000;
              -webkit-column-rule:5px outset #ff0000;
          }
    </style>
</head>
<body>
<!--
  多列：
    column-count:
    column-gap:每一列的间距
    column-rule:每一列间距的线及效果
-->
<div class="div1">
    大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好
    大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好
    大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好
    大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好
    大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好
    大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航