报纸排版（分列示例）

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

示例代码

    

  1.  <style>
    2. 

  2.         div {
    3. 

  3.             /*分成三列显示*/
    4. 

  4.             -webkit-column-count: 3;
    5. 

  5.             -moz-column-count: 3;
    6. 

  6.             column-count: 3;
    7. 

  7.             /*每列间隔10px*/
    8. 

  8.             -webkit-column-gap: 20px;
    9. 

  9.             -moz-column-gap: 20px;
    10. 

  10.             column-gap: 50px;
    11. 

  11.             /*列分隔线宽度*/
    12. 

  12.             -webkit-column-rule-width: 2px;
    13. 

  13.             -moz-column-rule-width:2px;
    14. 

  14.             column-rule-width: 5px;
    15. 

  15.             /*列分隔线颜色*/
    16. 

  16.             -webkit-column-rule-color: blue;
    17. 

  17.             -moz-column-rule-color: blue;
    18. 

  18.             column-rule-color: blue;
    19. 

  19.             /*列分隔线线型*/
    20. 

  20.             -webkit-column-rule-style: dashed;
    21. 

  21.             -moz-column-rule-style: dashed;
    22. 

  22.             column-rule-style: dashed;
    23. 

  23.         }
    24. 

  24.     </style>
    25. 

  25. </head>
    26. 

  26. <body>
    27. 

  27.     <h2>分列显示文本</h2>
    28. 

  28.     <div>
    29. 

  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. 

  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. 

  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. 

  32.     </div>
    33.

示例图

来自为知笔记(Wiz)

时间： 2024-08-24 03:05:13

报纸排版（分列示例）的相关文章

用itextsharp打印pdf示例

学习了用itextsharp输出PDF文档,支持用XML定义文档,可定义多个数据源,简单的表达式,用于项目中效果还不错,其中PdfPageEvent类由包大人提供. 示例程序定义了一个简单的xml文件,如图: 输出的PDF文档,如图: ------------------------华丽的分隔线----------------------------- 定义PDF打印的Xml格式说明 参考示例:合同PDF打印,SettingItem表 /Application/Wxht/PdfSetting P

【笔记-前端】div+css排版基础，以及错误记录

现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可能不好理解,所以简单描述一下使用div+css排版基础. 下图是一个使用div+css排版的示例: html和css: <html> <head> <style> body{font-size:20px;font-weight:bold;color:white;} .bac

基于 CoreText 的排版引擎

本章前言 使用 CoreText 技术,我们可以对富文本进行复杂的排版.经过一些简单的扩展,我们还可以实现对于图片,链接的点击效果.CoreText 技术相对于 UIWebView,有着更少的内存占用,以及可以在后台渲染的优点,非常适合用于内容的排版工作. 本章我们将从最基本的开始,一步一步完成一个支持图文混排.支持图片和链接点击的排版引擎. CoreText 简介 CoreText 是用于处理文字和字体的底层技术.它直接和 Core Graphics(又被称为 Quartz)打交道.Quart

基于 CoreText 的排版引擎：基础

本文节选自我的图书:<iOS 开发进阶>. 本文涉及的 Demo 工程在这里:https://github.com/tangqiaoboy/iOS-Pro. 扫码关注我的「iOS 开发」微信公众帐号: 本章前言 使用 CoreText 技术,我们可以对富文本进行复杂的排版.经过一些简单的扩展,我们还可以实现对于图片,链接的点击效果.CoreText 技术相对于 UIWebView,有着更少的内存占用,以及可以在后台渲染的优点,非常适合用于内容的排版工作. 本章我们将从最基本的开始,一步一步完成

全文搜索引擎 ElasticSearch 还是 Solr？

最近项目组安排了一个任务,项目中用到了全文搜索,基于全文搜索 Solr,但是该 Solr 搜索云项目不稳定,经常查询不出来数据,需要手动全量同步,而且是其他团队在维护,依赖性太强,导致 Solr 服务一出问题,我们的项目也基本瘫痪,因为所有的依赖查询都无结果数据了.所以考虑开发一个适配层,如果 Solr 搜索出问题,自动切换到新的搜索--ES. 其实可以通过 Solr 集群或者服务容错等设计来解决该问题.但是先不考虑本身设计的合理性,领导需要开发,所以我开始踏上了搭建 ES 服务的道路,从零开始

全文搜索引擎选 ElasticSearch 还是 Solr？

最近项目组安排了一个任务,项目中用到了基于 Solr 的全文搜索,但是该 Solr 搜索云项目不稳定,经常查询不出来数据,需要手动全量同步. 而且它还是其他团队在维护,依赖性太强,导致 Solr 服务一出问题,我们的项目也基本瘫痪,因为所有的依赖查询都无结果数据了. 所以考虑开发一个适配层,如果 Solr 搜索出问题,自动切换到新的搜索 ES.其实可以通过 Solr 集群或者服务容错等设计来解决该问题. 但是先不考虑本身设计的合理性,领导需要开发,所以我开始踏上了搭建 ES 服务的道路,从零开始

组件化设计与开发

http://colachan.com/post/3545 终于迎来一期特刊.最近打算在公司内部做一个分享,讲的是组件化的设计与开发的思维方式.准备完演讲资料,发现这完全可以改成一篇文章.藏着掖着不合适,发出来分享给有需求的朋友吧,就当是个试讲了,希望大家帮忙指出错误. 下载地址:https://www.jianguoyun.com/p/DY1Z3bEQwKOaBhimoyg 由于本文首先是以keynote的形式诞生的,其中还有动画和视频,所以我比较推荐大家直接下载keynote文件(也存了PP

《点石成金：访客至上的Web和可用性设计秘笈（原书第3版）》--- 读书笔记

这是一本关于界面设计的书, 它的英语书名是“Don't make me think”.     这是一本小薄书, 作者语言诙谐幽默,形象生动的阐述了我们应该如何设计我们的页面(网页, 海报, 手机应用, 报纸排版等) 最重要的就是: 简洁!   Don‘t make me think!              如果你现在在急着上厕所, 或者去参加一个重要的会议,再或者去和MM约会, 那么下面的内容是我为你精心准备的-----这本书的概要!    否则, 强烈建议仔细通读一下这个小册子.    

百度前端技术学院第一学习阶段总结

第一学习阶段已经结束了,针对HTML/CSS的训练,收获很多,现在对于CSS开始熟练,也享受一个漂亮的网页在手下诞生的满足感.今天再回过头去看看排行榜第一的各组的代码,继续学习. 任务一:使用了一些知道但很少用到的标签(可能也是因为以前练得太少了) 1.<figure>标签运用在在文档中插入图片,文档的内容与图片有关,是html5的新标签.使用<figcaption>元素为figure添加标题: 2.选择框<form><label>性别:</label