html - CSS 中的多列布局首先填充第一列并正确打印到多个页面

Question

我想构建一个打印效果很好的多列布局。我的目标是将一些内容分成 3 列和棘手的方面:最后内容首先尝试填充列 #1，然后再转到 #2 和 #3。

这个布局应该像这个图片一样打印(红线是下一页的分页符，这些是根据页面大小和内容自动管理的):

这是我现在正在尝试的代码，但是将高度设置为 100vh 似乎会中断打印，它只打印第一页，但多列工作如我所料。这也只需要在 Chrome 上工作。更容易看到打印 in this gist

将容器设置为 100% 高度打印正常，但列自动填充似乎不起作用。

所以现在的问题是能够打印多页并使用 column-fill auto

.multi-container {
    column-count: 3;
    padding: 0 25px;
    height: 100vh;
    column-fill: auto;
}

<div class="multi-container">

            <p>Arla Annetta</p>
<p>Lavina Argo</p>
<p>Aurora Arreola</p>
<p>Stephnie Augustass</p>
<p>Tanya Axtell</p>
<p>Gilbert Bachmann</p>
<p>Mattie Barra</p>
<p>Winona Berardi</p>
<p>Verdell Bergquist</p>
<p>Arcelia Bibbs</p>
<p>Reta Borders</p>
<p>Carrie Bradshaw</p>
<p>Loree Brick</p>
<p>Cristen Broderick</p>
<p>Hugo Bryan</p>
<p>Leroy Bucko</p>
<p>Marcene Burtner</p>
<p>Cheri Cassi</p>
<p>In ccc</p>
<p>Marcel Dade</p>
<p>Shara Dalessio</p>
<p>Michelina Delancey</p>
<p>Marian Depew</p>
<p>aJoh Doe</p>
<p>Naomi Drye</p>
<p>Moon Dumais</p>
<p>Delois Easterwood</p>
<p>Lenny Edwina 14</p>
<p>matiascasd far</p>
<p>Tameka Farnsworth</p>
<p>Cinda Fitzsimons</p>
<p>Gala Giroir</p>
<p>Lorean Giron</p>
<p>Rachel Green</p>
<p>Nicolasa Grigsby</p>
<p>Cristopher Gupta</p>
<p>Akilah Hagge</p>
<p>Cletus Haliburton</p>
<p>Gale Hallford</p>
<p>Ona Hile</p>
<p>Earl Hudock</p>
<p>Fritz Jaffe</p>
<p>Ellen Jerold 2</p>
<p>Dorene Josefa</p>
<p>Gita Kit</p>
<p>Alison Kontos</p>
<p>Adrians Laiches</p>
<p>Goldie Lamers</p>
<p>Windy Landi</p>
<p>Harriet Lindsley</p>
<p>Kay Lovato</p>
<p>Aldo Luper</p>
<p>Rosaura Manriquez</p>
<p>Mirella Mascorro</p>
<p>Marilu Maye</p>
<p>Henriette Mechling</p>
<p>Eulah Meis</p>
<p>Adans Morneau</p>
<p>Raphael Neagle</p>
<p>Theo Oliveras</p>
<p>Ethyl Patnaude</p>
<p>silva paulo</p>
<p>Julio Pendergrass</p>
<p>Geoffrey Pinette</p>
<p>Clement Poehler</p>
<p>Miranda Priestly</p>
<p>Kerstin Provo</p>
<p>Herta Raelene</p>
<p>Shanti Rainer</p>
<p>Newton Ramage</p>
<p>Veola Raymer</p>
<p>Loree Reinoso</p>
<p>Ignacio Rick</p>
<p>Cody Ringdahl</p>
<p>Nigel Rochin</p>
<p>Kandy Rogge</p>
<p>Elvie Rosenbeck</p>
<p>Marie Sandrock</p>
<p>Etta Shain</p>
<p>Mabel Shufelt</p>
<p>Afton Siewert</p>
<p>Daina Sohn</p>
<p>Olene Solley</p>
<p>Darcie Spaulding</p>
<p>davif sss</p>
<p>Damon Stan</p>
<p>Hien Stull</p>
<p>Tandra Warden</p>
<p>Ali Weatherford</p>
<p>Alix Westlake</p>
<p>Brain Wickman</p>
<p>Alona Woods</p>
<p>z x</p>
<p>Elease    Yarman</p>
<p>Elease  1  Yarman</p>
<p>Elease  2  Yarman</p>
<p>Elease  3  Yarman</p>
<p>Elease 4   Yarman</p>
<p>Elease 5   Yarman</p>
<p>Elease 6   Yarman</p>
<p>Elease 7   Yarman</p>
<p>Elease 8   Yarman</p>
<p>Elease 9   Yarman</p>
<p>Elease 10   Yarman</p>
<p>Elease 11   Yarman</p>
<p>Elease 12   Yarman</p>
<p>Elease 13   Yarman</p>
<p>Elease 14   Yarman</p>
<p>Elease 15   Yarman</p>
<p>Elease 16   Yarman</p>
<p>Elease 17   Yarman</p>
    </div>

Answer 1

这样试试:

.multi-container {
  width: 89%;
  display: flex;
  flex-flow: row wrap;
  margin-left: 110px;
}

p{
  transform: rotate(-90deg);
  padding: 0;
  margin: 20px -40px;
  width: 150px;
  height: 150px;
  text-align: center;
}

    <div class="multi-container">
      <p>Arla Annetta</p>
      <p>Lavina Argo</p>
      <p>Aurora Arreola</p>
      <p>Stephnie Augustass</p>
      <p>Tanya Axtell</p>
      <p>Gilbert Bachmann</p>
      <p>Mattie Barra</p>
      <p>Winona Berardi</p>
      <p>Verdell Bergquist</p>
      <p>Arcelia Bibbs</p>
      <p>Reta Borders</p>
      <p>Carrie Bradshaw</p>
      <p>Loree Brick</p>
      <p>Cristen Broderick</p>
      <p>Hugo Bryan</p>
      <p>Leroy Bucko</p>
      <p>Marcene Burtner</p>
      <p>Cheri Cassi</p>
      <p>In ccc</p>
      <p>Marcel Dade</p>
      <p>Shara Dalessio</p>
      <p>Michelina Delancey</p>
      <p>Marian Depew</p>
      <p>aJoh Doe</p>
      <p>Naomi Drye</p>
      <p>Moon Dumais</p>
      <p>Delois Easterwood</p>
      <p>Lenny Edwina 14</p>
      <p>matiascasd far</p>
      <p>Tameka Farnsworth</p>
      <p>Cinda Fitzsimons</p>
      <p>Gala Giroir</p>
      <p>Lorean Giron</p>
      <p>Rachel Green</p>
      <p>Nicolasa Grigsby</p>
      <p>Cristopher Gupta</p>
      <p>Akilah Hagge</p>
      <p>Cletus Haliburton</p>
      <p>Gale Hallford</p>
      <p>Ona Hile</p>
      <p>Earl Hudock</p>
      <p>Fritz Jaffe</p>
      <p>Ellen Jerold 2</p>
      <p>Dorene Josefa</p>
      <p>Gita Kit</p>
      <p>Alison Kontos</p>
      <p>Adrians Laiches</p>
      <p>Goldie Lamers</p>
      <p>Windy Landi</p>
      <p>Harriet Lindsley</p>
      <p>Kay Lovato</p>
      <p>Aldo Luper</p>
      <p>Rosaura Manriquez</p>
      <p>Mirella Mascorro</p>
      <p>Marilu Maye</p>
      <p>Henriette Mechling</p>
      <p>Eulah Meis</p>
      <p>Adans Morneau</p>
      <p>Raphael Neagle</p>
      <p>Theo Oliveras</p>
      <p>Ethyl Patnaude</p>
      <p>silva paulo</p>
      <p>Julio Pendergrass</p>
      <p>Geoffrey Pinette</p>
      <p>Clement Poehler</p>
      <p>Miranda Priestly</p>
      <p>Kerstin Provo</p>
      <p>Herta Raelene</p>
      <p>Shanti Rainer</p>
      <p>Newton Ramage</p>
      <p>Veola Raymer</p>
      <p>Loree Reinoso</p>
      <p>Ignacio Rick</p>
      <p>Cody Ringdahl</p>
      <p>Nigel Rochin</p>
      <p>Kandy Rogge</p>
      <p>Elvie Rosenbeck</p>
      <p>Marie Sandrock</p>
      <p>Etta Shain</p>
      <p>Mabel Shufelt</p>
      <p>Afton Siewert</p>
      <p>Daina Sohn</p>
      <p>Olene Solley</p>
      <p>Darcie Spaulding</p>
      <p>davif sss</p>
      <p>Damon Stan</p>
      <p>Hien Stull</p>
      <p>Tandra Warden</p>
      <p>Ali Weatherford</p>
      <p>Alix Westlake</p>
      <p>Brain Wickman</p>
      <p>Alona Woods</p>
      <p>z x</p>
      <p>Elease    Yarman</p>
      <p>Elease  1  Yarman</p>
      <p>Elease  2  Yarman</p>
      <p>Elease  3  Yarman</p>
      <p>Elease 4   Yarman</p>
      <p>Elease 5   Yarman</p>
      <p>Elease 6   Yarman</p>
      <p>Elease 7   Yarman</p>
      <p>Elease 8   Yarman</p>
      <p>Elease 9   Yarman</p>
      <p>Elease 10   Yarman</p>
      <p>Elease 11   Yarman</p>
      <p>Elease 12   Yarman</p>
      <p>Elease 13   Yarman</p>
      <p>Elease 14   Yarman</p>
      <p>Elease 15   Yarman</p>
      <p>Elease 16   Yarman</p>
      <p>Elease 17   Yarman</p>
    </div>