Rozkładanie kolumn CSS w poziomie zamiast w pionie

Question

Nie jestem całkiem pewien, czy jest to możliwe (przynajmniej nie z mojego doświadczenia lub Google), ale zastanawiałem się, czy istnieje sposób na wymuszenie porządku kolumn CSS. Na przykład, zamiast:

item1  item4  item7 
item2  item5  item8 
item3  item6  item9 

kolejność ich tak:

item1  item2  item3 
item4  item5  item6 
item7  item8  item9 

podane html tak:

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    etc... 
</ul> 

Oczywiście mógłbym użyć tabeli (nie, dziękuję) lub pływaków , ale miałem nadzieję użyć właściwości CSS columns.

Answer 1

Można to zrobić na dwa sposoby.

Albo użyj wyświetlacza: wbudowany blok; lub użyj wyświetlacza: flex;

Oto ekran: blok inline; Przykład:

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t display: inline-block; 
 
\t width: 30%; 
 
\t vertical-align: top; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item 8</li> 
 
    <li>item 9</li> 
 
</ul>

A oto ekran: wyginają; przykład:

Uwaga: Flex jest obsługiwany w IE11, ale w pełni obsługiwany w Edge. Jest w pełni obsługiwany we wszystkich evergreenach.

ul { 
 
\t margin-left: .25em; 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 
li { 
 
\t margin-left: 0; 
 
\t padding-left: 0; 
 
\t width: 33.3%; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
    <li>item 3</li> 
 
    <li>item 4</li> 
 
    <li>item 5</li> 
 
    <li>item 6</li> 
 
    <li>item 7</li> 
 
    <li>item 8</li> 
 
    <li>item 9</li> 
 
</ul>