两列布局用于打印

Question

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

Wanted   Not Wanted

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

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

Answer 1

你可以用这个 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

<section class="one">
   <h1>My awesome project</h1>
</section>
<section class="two">
   Very long content
</section>

例

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

@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;
  }
}