从上到下而不是从左到右按列列出项目 [英] List items in columns from top to bottom instead of left to right

问题描述

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

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
...

我在列表中显示它们:

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

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

The list displays 4 columns on large displays:

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

在小型显示器上显示2:

and 2 on small displays:

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

如何记住CSS将列表在小型显示器上折叠为2列?

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

推荐答案

使用 CSS3多列布局为了这. 浏览器支持存在疑问，因此请使用供应商前缀.

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

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>

这篇关于从上到下而不是从左到右按列列出项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！