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

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:

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

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

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

回答1:

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>

回答2:

Just to make it clear from Salman A answer (I only understood his answer once I read the third solution from this post ― the "Text Columns" one), the main part of the code to change the li order from left to right to top to bottom is:

ul {
  column-count: 4;
  column-gap: 0;
}
li {
  display: inline-block;
}

Everything else in Salman A answer is to make the adjustment for large/small screens

来源：https://stackoverflow.com/questions/28426924/list-items-in-columns-from-top-to-bottom-instead-of-left-to-right

标签

html

css

css3

responsive-design

multiple-columns