Pytanie Jak utworzyć wiele kolumn z pojedynczej listy nieuporządkowanej?


Chciałbym utworzyć listę z wieloma kolumnami: https://jsfiddle.net/37dfwf4u/

Nie ma problemu z używaniem innej listy dla każdej kolumny:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>
ul {
    display:inline-block;
}

Czy jednak można to zrobić za pomocą ciągłej listy i czystego CSS, aby CSS ustawiał kolumny automatycznie? Na przykład. za pomocą układu flex, którego jeszcze nie znam?


14
2018-03-05 20:07


pochodzenie




Odpowiedzi:


Tak, możesz utworzyć listę z wieloma kolumnami zgodnie z opisem, jeśli utworzysz ul elastyczny pojemnik, zmień flex-direction do column, pozwól mu owijać, stosując flex-wrap: wrap i dodatkowo zmusić go do zawijania, ograniczając jego height:

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
</ul>
<style></style>


15
2018-03-05 20:13



To wydaje się być dobrym rozwiązaniem. Całkowicie samoregulujące, żadna liczba kolumn nie musi być zdefiniowana, żadnych dodatkowych elementów, tylko ciągła lista. - Sempervivum
BTW: Jak mogę zrobić takie wbudowane demo ("Uruchamiać fragment kodu")? - Sempervivum
@Sempervivum w polu pytania i odpowiedzi znajdują się różne symbole. Jeśli je umieścisz, zobaczysz ich znaczenie. Jednym z nich jest tworzenie fragmentu. - Johannes
Dzięki @Johannes Znalazłem to wyjaśnienie i otrzymałem je w końcu: meta.stackoverflow.com/questions/269753/... - Sempervivum


Rozważ skorzystanie z układu wielokolumnowego CSS3:

CSS3 Wiele kolumn

Możesz to zrobić za pomocą tylko jednej listy i zdefiniować liczbę kolumn za pomocą CSS. Jeśli sprawdzisz obsługę przeglądarki CSS3 na wielu kolumnach tutaj możesz zobaczyć częściową obsługę większości przeglądarek, ponieważ nie obsługują one właściwości break-before, break-after i break-inside. Ale obsługują właściwości potrzebne do utworzenia listy z wieloma kolumnami z prefiksem.

.container {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  margin: 0;
}
<div class="container">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>
</div>


8
2018-03-05 21:20



Również dobre rozwiązanie. Niezupełnie samoregulujące się, ponieważ należy dostosować liczbę kolców. - Sempervivum
W rzeczywistości jest to znacznie lepsze rozwiązanie dla list, w których możesz potrzebować dodawać lub usuwać elementy listy. Możesz ustawić liczbę kolumn w responsywnych punktach przerwania i zapomnieć o tym. Przy pierwszym (zaakceptowanym rozwiązaniu) za każdym razem, gdy dodajesz lub usuwasz elementy listy, musisz ręcznie regulować wysokości; i nie jest oczywiste, która wysokość działa najlepiej dla danej liczby elementów: wiele prób i błędów. - Ray
za pomocą column-width zamiast column-count automatycznie dostosuje liczbę kolumn w zależności od szerokości kontenera - jnnnnn
Wow, magia jest prawdziwa, nauczyłem się czegoś nowego dzisiaj, okrzyki! - George Dimitriadis