CSS отображает списки в горизонтальном порядке

#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. Я пробовал это раньше, но тогда первый тип школы продолжается на второй странице вместо второй колонки 🙁