Mam listę elementów, które chcę zmieścić w przestrzeni ograniczonej w pionie:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

Ponieważ nie chcę, aby lista miała więcej niż określoną wysokość, ale mogę ją swobodnie rozwinąć w poziomie, chcę podzielić listę na kolumny, w ten sposób:

One    Two     Three
Four   Five    Six

Lub alternatywnie (w moim przypadku zamówienie nie jest ważne)

One    Three   Five
Two    Four    Six

Właściwość csscolumn-count pozwala na rozbicie listy na kolumny, ale akceptuje tylko stałą liczbę kolumn. Nie znam liczby przedmiotów, które będę miał (może wynosić od 1 do ponad 40), więc jeśli ustawię liczbę kolumn na 3, każda lista zawierająca więcej niż 6 elementów będzie zbyt wysoka, a jeśli są tylko 4 przedmioty, wtedy tylko pierwsza kolumna będzie miała dwa elementy i będzie wyglądać nierówno.

Idealnie więc potrzebowałbymrow-count nieruchomość, ale nie istnieje. Myślę, że mogę to zrobić również w Javascript, ale szukam rozwiązania tylko dla CSS.

Próbowałem czegoś:float:left na każdyli umieszcza listę w jednym wierszu. Aby rozbić go na dwa rzędy, musiałbymnie zastosowaćfloat:left do elementu N / 2. Nie wiem, jak to zrobić.

Wiem też, że mogę to zrobić, rozbijając go na wieleul, każdy z dwomali, ifloat:left im, ale chciałbym uniknąć bałaganu HTML dla czegoś całkowicie prezentacyjnego.

Czy ktoś ma rozwiązanie tego problemu?

Edytować: Myślę, że nie wyjaśniłem jasno moich wymagań. Chcę, aby lista została posortowana w kolumny, nie wiedząc, ile elementów mam miećtak, że zawsze będę miał dwa rzędy.

Na przykład z 7 przedmiotami chcę mieć:

One    Two     Three   Four
Five   Six     Seven

Z trzema przedmiotami:

One    Two
Three