两栏 div 包含在 individual 打印页面中

Question

抱歉，如果之前有人问过这个问题，但这里是：

我正在使用 HTML 和 CSS 创建报告，尽管它们最终得到了 PDF 格式。该报告需要在大多数页面上包含两列布局，所以我使用：

<div class="two_columns">
  <p>Lots and lots of text...</p>
  <p>And multiple paragraphs...</p>
</div>

和

div.two_columns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

但是，对于任何长度足以跨越多个页面的报告部分，左栏会继续到第二页，直到显示 div 中大约一半的文本，然后它换行到回到第一页的右栏。但我希望左栏换行到第一页的右栏，直到第一页充满文本，然后换行到第二页的左栏（并在两个页面中显示大约相同数量的文本第二页上的列）。有没有办法做到这一点？我不想为 individual 列或页面创建单独的 divs，因为这些不同部分的长度取决于数据的特征，每个单元都不同已报道。

Answer 1

首先，您必须指定div的高度。然后你可以使用 column-fill: auto;.

.balanced {
  border: 1px solid #c1c1c1;
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -webkit-column-fill: balanced;
  -moz-column-fill: balanced;
  column-fill: balanced;
}

.unbalanced {
  border: 1px solid #c1c1c1;
  height: 500px;
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

<h2>Balanced</h2>
<div class="balanced"><p>Lorem ipsum dolor sit amet, ne inani nullam cum. Et tale facilisi mel, tation graeci facilisi ne nec, vix voluptaria mnesarchum repudiandae te. Mutat minim virtute ei sea, his augue atomorum explicari cu. At mea mucius suscipiantur, vix no alia aliquando. Pro et regione laboramus, ridens deterruisset sit te.</p>

<p>Sit ea elit bonorum iracundia, mucius luptatum has et. Te his modus labores conclusionemque, eu ius salutandi efficiendi, an usu alia commune. Vero menandri vis eu, exerci complectitur id has. Commune abhorreant liberavisse cum an. Nam eu nibh utinam audire, ius in dico aliquid partiendo, sed delicata assentior ei.</p>

<p>Has ludus nemore cu, liber scaevola instructior mel ei. Copiosae pertinacia vix ne, duo eu prima nostrum, nec eu autem posse facilisi. Impetus invidunt elaboraret ad eos. Tale argumentum te quo.</p>

<p>Eu ullum option definitionem pro, est erat novum ornatus ea, utinam deleniti vim no. Nec adipisci maluisset in, ex solum labores iudicabit sit. Et quo fabulas admodum petentium. Ea postulant iracundia contentiones quo. Ea est oratio altera.</p>

<p>Eam esse adhuc theophrastus et. Sit ei duis fierent, cum ex eius iriure fabulas. Nec albucius deserunt no. Vix albucius placerat reprimique in, est ei erat nusquam referrentur.</p></div>

<h2>Unbalanced</h2>
<div class="unbalanced"><p>Lorem ipsum dolor sit amet, ne inani nullam cum. Et tale facilisi mel, tation graeci facilisi ne nec, vix voluptaria mnesarchum repudiandae te. Mutat minim virtute ei sea, his augue atomorum explicari cu. At mea mucius suscipiantur, vix no alia aliquando. Pro et regione laboramus, ridens deterruisset sit te.</p>

<p>Sit ea elit bonorum iracundia, mucius luptatum has et. Te his modus labores conclusionemque, eu ius salutandi efficiendi, an usu alia commune. Vero menandri vis eu, exerci complectitur id has. Commune abhorreant liberavisse cum an. Nam eu nibh utinam audire, ius in dico aliquid partiendo, sed delicata assentior ei.</p>

<p>Has ludus nemore cu, liber scaevola instructior mel ei. Copiosae pertinacia vix ne, duo eu prima nostrum, nec eu autem posse facilisi. Impetus invidunt elaboraret ad eos. Tale argumentum te quo.</p>

<p>Eu ullum option definitionem pro, est erat novum ornatus ea, utinam deleniti vim no. Nec adipisci maluisset in, ex solum labores iudicabit sit. Et quo fabulas admodum petentium. Ea postulant iracundia contentiones quo. Ea est oratio altera.</p>

<p>Eam esse adhuc theophrastus et. Sit ei duis fierent, cum ex eius iriure fabulas. Nec albucius deserunt no. Vix albucius placerat reprimique in, est ei erat nusquam referrentur.</p></div>

这是给你的 JSFiddle。

这是关于它的good source。

两栏 div 包含在 individual 打印页面中

Two-column div contained within individual printed pages

html

css

pdf

css-multicolumn-layout