html – 用于打印的两列布局

我有一个包含大量文本的网站.为了使它在打印时更具可读性,我想创建一个分页的两列布局,即我希望每页有两列,第一列的文本应该换行到第二列并从那里换到下一页(而不是将两个非常高的列切成页面)：

Wanted   Not Wanted

 1 2       1 4
 ---       ---
 3 4       2 5
 ---       ---
 5 6       3 6

有人有一个有效的例子吗？

最佳答案

你可以使用这个CSS

@media print {
  body{
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
}

您还可以添加单个列标题.

CSS

@media print {
  .two {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
  .one {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
  }
}

HTML



Example 

h1 {
  text-align: center
}

count::before {
  counter-increment: section;
  content: "\A I am flag " counter(section) ".\A ";
  font-weight: bold;
  white-space: pre;
}

@media print {
  .two {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }
  .one {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
  }
  input[type="button"] {
    display: none
  }
}
dio nec metus. Sed ac interdum diam. Donec eget lacus at nisi cursus luctus. Curabitur id quam tellus. Maecenas euismod magna non faucibus lobortis. Morbi varius nunc vitae
  dictum pellentesque. Proin condimentum porttitor felis,a eleifend lorem viverra at. Quisque lobortis aliquet ex et malesuada. Curabitur mattis elit nec felis efficitur,et tincidunt nulla eleifend. Curabitur ac pulvinar est. Cras semper vitae mauris
  vitae congue. Nunc sit amet pharetra erat. Sed mattis nunc ac rhoncus euismod. Nam sapien justo,consequat in tortor vitae,vulputate varius diam. Nulla ut velit consequat enim dictum mattis sit amet quis purus. Ut malesuada sapien vel massa dapibus
  vehicula. Nunc consequat neque eros,eget consectetur nisl suscipit vel. Nam eget bibendum felis. Donec pellentesque neque ultricies mi imperdiet,eu aliquet velit tempus. Sed ornare tincidunt velit,ac venenatis neque. Fusce condimentum fringilla est,eu malesuada sem faucibus hendrerit. Cras vitae placerat dui. Nam pellentesque tortor ac metus convallis mattis. Pellentesque maximus fermentum porttitor. Vestibulum vehicula enim feugiat,cursus sem non,luctus nisl. Morbi rhoncus dignissim ante et
  fringilla. Vivamus et augue in orci consectetur faucibus at ut ante. Etiam ipsum massa,semper ut congue a,consequat eu turpis.
  dio laoreet,sit amet ornare risus faucibus. Nulla facilisi. Ut aliquam egestas justo,id dignissim urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. Maecenas
  ut elementum mi,eget varius sapien. Praesent lectus purus,vehicula euismod fringilla vestibulum,iaculis quis dui. In elit augue,aliquam nec nisi at,vehicula sodales tortor. Proin feugiat blandit eros,at elementum erat. Etiam mi orci,euismod vitae
  mollis vel,facilisis in ipsum. Donec porta dolor sed hendrerit tempor. Morbi et eros sit amet lorem tristique luctus sed non felis. Aenean eros dui,hendrerit sed odio quis,cursus sollicitudin felis. Nullam tincidunt sed mi nec dictum. Curabitur velit
  purus,gravida nec luctus at,vehicula ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vitae est eu ipsum scelerisque ullamcorper sit amet commodo elit. Nulla ut commodo tortor.
  dio laoreet,id dignissim
  urna sodales in. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. Maecenas ut elementum mi,at elementum erat.
  dio nec metus.


 原文链接：https://www.f2er.com/html/425735.html

html – 用于打印的两列布局

猜你在找的HTML相关文章