zoukankan      html  css  js  c++  java
  • 报纸排版(分列示例)

    column-count:3 分成3列显示;column-gap:50px 每列间隔50px ;column-rule-5px 列分隔线宽度;column-rule-color:blue 列分隔线颜色;column-rule-style:dashed 列分隔线线型

    示例代码
    1. <style>
    2. div {
    3. /*分成三列显示*/
    4. -webkit-column-count:3;
    5. -moz-column-count:3;
    6. column-count:3;
    7. /*每列间隔10px*/
    8. -webkit-column-gap:20px;
    9. -moz-column-gap:20px;
    10. column-gap:50px;
    11. /*列分隔线宽度*/
    12. -webkit-column-rule-width:2px;
    13. -moz-column-rule-width:2px;
    14. column-rule-width:5px;
    15. /*列分隔线颜色*/
    16. -webkit-column-rule-color: blue;
    17. -moz-column-rule-color: blue;
    18. column-rule-color: blue;
    19. /*列分隔线线型*/
    20. -webkit-column-rule-style: dashed;
    21. -moz-column-rule-style: dashed;
    22. column-rule-style: dashed;
    23. }
    24. </style>
    25. </head>
    26. <body>
    27. <h2>分列显示文本</h2>
    28. <div>
    29. Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
    30. Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
    31. Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
    32. </div>
    示例图





    从零到现在,一路走来,感谢众多无私的知识分享者,我愿意为你们接下一棒!
  • 相关阅读:
    FPGA远程更新之限制条件
    异步FIFO格雷码与空满
    异步FIFO空满设计延迟问题
    从云端到边缘 AI推动FPGA应用拓展
    异步FIFO跨时钟域亚稳态如何解决?
    FPGA该如何应对ASIC的大爆发?
    AbstractQueuedSynchronizer概述
    ssh 解决经常断开与记住密码功能
    CentOS 7 Docker安装
    Redis设计与实现笔记
  • 原文地址:https://www.cnblogs.com/Jener/p/5791562.html
Copyright © 2011-2022 走看看