列表中的项目从上到下而不是从左到右

I have a list of countries in alphabetical order like:

我有一个按字母顺序排列的国家/地区列表,例如:

Albania
Andorra
Armenia
Austria
Azerbaijan
Belarus
Belgium
Bosnia and Herzegovina
Bulgaria
Croatia
Cyprus
Czech Republic
Denmark
Estonia
Finland
France
Georgia
Germany
Greece
...

I'm displaying them in a list:

我在列表中显示它们:

<ul class="mylist">
  <li>Albania</li>
  <li>Andorra</li>
  <li>Armenia</li>
  <li>Austria</li>
  <li>Azerbaijan</li>
  ...
</ul>

The list displays 4 columns on large displays:

该列表在大型显示器上显示4列:

ul.mylist li {
    float: left;
    width: 25%;
}

and 2 on small displays:

和小显示器上的2:

ul.mylist li {
    float: left;
    width: 50%;
}

This results in a list like (large display):

这导致像(大显示)列表:

Albania     Andorra  Armenia  Austria
Azerbaijan  Belarus  Belgium  Bosnia and Herzegovina
Bulgaria    Croatia...

Okay, now to the tricky part: The count of countries which are displayed may vary due to filter-options. And I want to sort the countries the other way (top to bottom, left to right) like this:

好的,现在到了棘手的部分:显示的国家数量可能会因过滤选项而有所不同。我想以另一种方式(从上到下,从左到右)对国家进行排序,如下所示:

Albania     Bosnia and Herzegovina Finland   [4th col]
Andorra     Bulgaria               France    ...
Armenia     Croatia                Georgia
Austria     Cyprus                 Germany
Azerbaijan  Czech Republic         ...
Belarus     Denmark
Belgium     Estonia

How can it be done keeping in mind that the CSS will fold the list to 2 columns on small displays?

如何才能记住CSS会将列表折叠到小显示器上的2列?

1 个解决方案

#1

Use CSS3 multi-column layout for this. Browser support is questionable so please use vendor prefixes.

为此使用CSS3多列布局。浏览器支持有问题,请使用供应商前缀。

ul {
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 100%;
}
/* default */
ul {
     -moz-column-count: 4;
  -webkit-column-count: 4;
          column-count: 4;
}
/* < 800px */
@media screen and (max-width: 799px) {
  ul {
       -moz-column-count: 3;
    -webkit-column-count: 3;
            column-count: 3;
  }
}
/* < 400px */
@media screen and (max-width: 399px) {
  ul {
       -moz-column-count: 2;
    -webkit-column-count: 2;
            column-count: 2;
  }
}

<ul>
  <li>Albania</li>
  <li>Andorra</li>
  <li>Armenia</li>
  <li>Austria</li>
  <li>Azerbaijan</li>
  <li>Belarus</li>
  <li>Belgium</li>
  <li>Bosnia and Herzegovina</li>
  <li>Bulgaria</li>
  <li>Croatia</li>
  <li>Cyprus</li>
  <li>Czech Republic</li>
  <li>Denmark</li>
  <li>Estonia</li>
  <li>Finland</li>
  <li>France</li>
  <li>Georgia</li>
  <li>Germany</li>
  <li>Greece</li>
</ul>