#html #css
Вопрос:
Мне нужно показать несколько списков ul в 3 столбцах в горизонтальном порядке.
Следующее изображение-это результат, когда я печатаю HTML-страницу. На странице помещается около 45 названий школ.
Проблема в том, что мне нужно, чтобы синий ul цвет заполнял первый столбец, а затем продолжался во втором столбце на первой странице, затем розовый продолжался до конца страницы, затем зеленый столбец и так далее.
И это код, который я создаю до сих пор.
[
@page{size: A4; margin: 0;}@media print{html, body{width: 210mm; height: 297mm;}}
ul{list-style-type: none; columns: 3; column-fill: balance; padding: 0; margin: 0;}
.break{page-break-before: always;}
.element{position: relative; padding-bottom: 0.3cm; }
.column{width: .1cm; height: 100%; display: inline-block; position: absolute;}
.circle{border-radius: 50%; width: .7cm; height: .7cm; font-weight: bold; color: rgb(255, 255, 255); display: inline-block; text-align: center; line-height: .7cm; margin-right: -8px; z-index: 999; position: relative;}
li:nth-of-type(48n){page-break-after: always; }
table{display: inline; border-left: 5px; padding-left: 10px; border-spacing: 0;}
td{padding: 0;}
li{position:relative} <!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="type1">
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">1</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #1B67B1;">45</span>
<div class="column" style="background-color: #1B67B1;"></div>
<table>
<tr><td style="color: #1B67B1;">School name 45</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
</ul>
<ul class="type2">
<li>
<span class="circle" style="background-color: #FF67B1;">101</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 101</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #FF67B1;">101</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #FF67B1;">101</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #FF67B1;">101</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #FF67B1;">101</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #FF67B1;">101</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #FF67B1;">101</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #FF67B1;">101</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 1</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #FF67B1;">109</span>
<div class="column" style="background-color: #FF67B1;"></div>
<table>
<tr><td style="color: #FF67B1;">School name 109</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
</ul>
<ul class="type3">
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">201</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 201</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
<li>
<span class="circle" style="background-color: #00671f;">221</span>
<div class="column" style="background-color: #00671f;"></div>
<table>
<tr><td style="color: #00671f;">School name 221</td></tr>
<tr><td>Address line 1</td></tr>
<tr><td>Address line 2</td></tr>
</table>
</li>
</ul>
</body>
</html> ]2
Ответ №1:
Если я правильно понимаю, вы хотите прерывать страницу после каждого списка при печати.
@media print {
ul .type1,
ul .type2,
ul .type3 {
break-after: always;
}
}
Комментарии:
1. На одной странице может быть около 45 школ, мне нужно
breack-afterпо 45 элементов (информация о школах). Возможно, есть 50 школ типа 1, мне нужно, чтобы первые 45 школ заполнили первую страницу, затем остальные 5 школ должны быть первыми 5 элементами на второй странице, а затем вторая страница продолжается с типом 2 и типом 3 в том же порядке. проблема заключается в порядке расположения элементов.
Ответ №2:
Удалите columns из ul стилей и добавьте его в body контейнер, это приведет к тому, что элементы будут следовать строками вместо размещения в блоках ul s.
Комментарии:
1. Я пробовал это раньше, но тогда первый тип школы продолжается на второй странице вместо второй колонки 🙁