html - CSS 中的多列布局,首先填充第一列并正确打印到多个页面
问题描述
我想构建一个打印良好的多列布局。我的目标是将一些内容分成 3 列和棘手的方面:最后,内容首先尝试填充第 1 列,然后再转到第 2 列和第 3 列。
此布局应该可以打印为这张图片(红线是下一页的分页符,这些是根据页面大小和内容自动管理的):
这是我现在正在尝试的代码,但将高度设置为 100vh 似乎会中断打印,它只打印第一页,但多列按我的预期工作。这也只需要在 Chrome 上工作。在这个要点中更容易看到印刷品
将容器设置为高度 100% 打印正常,但列填充自动似乎不起作用。
所以现在的问题是能够打印多页并使用自动列填充
.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>
解决方案
以这种方式尝试:
.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>
推荐阅读
- python-3.x - 如何将所有 Hive 数据库及其表导出到 csv 或 txt 文件
- c# - C# 事件处理程序可以“重载”吗?
- javascript - 将另一个对象推入数组
- php - 从 MySQL DB 列中选择 JSON 数据并显示
- javascript - 使用 JQuery 悬停剪辑我的引导卡时“抽搐”
- json - 空手道 dsl 中是否有一种方法来实现 if /then else if/then 以进行模式验证
- swift - 本机 iOS WebRTC 似乎仅在提供时连接
- sql - 如何选择小于时间戳的日期和时间?
- c - C程序打印矩阵的对角线元素
- wordpress - 通过 /admin URL 访问 Wordpress WP-Admin