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;。

＆＃13;

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

＆＃13;

<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>

＆＃13;

以下是replaceCls。

以下是关于它的JSFiddle。

单列打印页面中包含两列div

1 个答案: