html - 包含在单独打印页面中的两列 div

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 中大约一半的文本，然后它会换回到第一页的右栏页。但我希望左栏换行到第一页的右栏，直到第一页充满文本，然后换行到第二页的左栏(并在两个页面中显示大约相同数量的文本第二页上的列)。有没有办法做到这一点？我不想为单独的列或页面创建单独的 div，因为这些不同部分的长度取决于数据的特性，对于每个报告的单元来说这些特性都不同。

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关于它。