zoukankan      html  css  js  c++  java
  • 多列布局 css3 column属性

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>多列布局</title>
    <style>
    div{ -moz- Firefox的前缀
    -webkit- Chrome和safari
    -ms- IE
    -o- opera


    /*-moz-column-150px;自动设置列数
    -moz-column-count:3;设置列数,auto为1列
    -moz-columns:auto 3;宽自动,列数:3*/
    -moz-columns:200px 3; /*每列的最小宽度为200px,当缩小到200px以内时,列数就自动。*/
    -moz-column-gap:20px; /*列与列之间的距离*/
    -moz-column-rule:2px dashed #ccc;/*列与列之间的分割线,这个分割线不会破坏布局*/
    -moz-column-span:all; /*设置跨列大标题,none则不跨列;*/

    -webkit-columns:200px 3;
    -webkit-column-gap:20px;
    -webkit-column-rule:2px dashed #ccc;

    columns:200px 3;
    column-gap:20px;
    column-rule:2px dashed #ccc;

    }
    h1{ (跨列大标题)
    -moz-column-span:all;(火狐暂时不支持)
    -webkit-column-span:all;
    column-span:all;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div>
    <h1>我是大标题</h1>
    <h3>我是第一段内容</h3>
    <p>“本”在哪里?徐洪才认为,“本”就是城乡一体化、新兴城镇化过程中一些机制、体制的创新,比如户籍制度、社会保障体制改革、土地制度改革。</p>
    <h3>我是第二段内容</h3>
    <p>四线城市的土地是充足的,但人口流入少,需求没那么旺盛,所以房地产就有库存问题,而以下城市需求很旺盛,但土地供应不足,供求矛盾很突出。一线城市集中了教育、医疗等资源,还有就业机会。所以人口蜂拥而至。</p>
    <h3>我是第三段内容</h3>
    <p>徐洪才指出,从农村到三、四线城市到二线城市再到大城市,形成一个梯形发展的格局。将来还会形成大量人口向一线城市涌进,大城市的矛盾会越来越尖锐,大城市病会越来越突出。</p>
    <h3>我是第四段内容</h3>
    <p>“这些制度建立好了,大家就没必要往大城市跑了。中国一线城市高房价的病根就在这儿。但这个改革是一个漫长的过程。”徐洪才坦言。</p>
    </div>
    </body>
    </html>

  • 相关阅读:
    forEach 获取下标信息
    js select选择框回显 当value是汉字时
    java 大写字符串字符串转成小写驼峰格式
    关于too many open files解决方案
    mysql 判断区间是否存在交集和并集
    http 请求拼接多个请求参数
    Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test (default-test) on project jic-member: There are test failures.
    用dubbo时遇到的一个序列化的坑 xxxServiceImpl must implement java.io.Serializable
    django的分页器
    Django-form组件和ModelForm组件
  • 原文地址:https://www.cnblogs.com/annie211/p/6024463.html
Copyright © 2011-2022 走看看