Pytanie CSS - Pojedyncza lista z dynamicznym zawijaniem kolumn [duplikat]


Możliwe duplikaty:
CSS: sposoby dzielenia listy na kolumny na stronie? 

Szukałem tego rozwiązania i nie mogłem go znaleźć, więc pomyślałem, że opublikuję to, co ostatecznie zrobiłem.

Próbowałem zbudować pojedynczą listę, w której po piątym elemencie lista byłaby zawijana i przenoszona do innej kolumny. Dzieje się tak dlatego, że może być super dynamiczny z ilością potrzebnych elementów.

enter image description here

Oto rozwiązanie, które wymyśliłem.

 li{
   position: relative;
   line-height: -6px;
}
    
 ol li:nth-child(6) {
    margin-top: -90px;
}
    
 ol li:nth-child(-n+5){
    margin-left: 0em;
 }
    
 ol li:nth-child(n+6){
   margin-left: 10em;
 }
 <ol>
      <li>Aloe</li>
      <li>Bergamot</li>
      <li>Calendula</li>
      <li>Damiana</li>
      <li>Elderflower</li>
      <li>Feverfew</li>
      <li>Ginger</li>
      <li>Hops</li>
      <li>Iris</li>
      <li>Juniper</li>
 </ol>
    
    
   

Oto Fiddle: http://jsfiddle.net/im_benton/tHjeJ/

Co myślisz o moim rozwiązaniu? Jakie jest rozwiązanie, które będzie działać w IE?


11
2017-10-19 17:09


pochodzenie


Czy sprawdziłeś to pytanie? stackoverflow.com/questions/6509106/... ? - tuff


Odpowiedzi:


Spróbuj użyć poniższych zaleceń jako @tuff.

ol {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

http://jsfiddle.net/tHjeJ/6/


23
2017-10-19 19:17



Wsparcie nie jest wspaniałe: caniuse.com/#feat=multicolumn - Thomas
wsparcie jest dobre, ale obecnie Chrome jest pełen dziwactw i błędów. - vsync


Nie jest to trudne, jeśli chcesz tylko dwie kolumny Możesz spróbować czegoś takiego na swojej liście:

ol{ width:300px;}

li{
  width:50%;  
  float:left;
}​

W rzeczywistości obleje taką samą liczbę pozycji na liście w każdej kolumnie, jeśli liczba li podzieli się według numeru kolumny.

Jeśli chcesz, by numeracja była jak na twoim obrazie można użyć zawijania div dla każdej kolumny, a następnie użyć start atrybut na twojej liście ... będzie to coś w stylu start="6"


0
2017-10-19 19:31



Działa to tylko wtedy, gdy nie interesuje Cię kolejność list. Chcę, aby lista została przeniesiona do nowej kolumny, jeśli jest więcej niż 5 elementów. - im_benton
Przeczytaj po tekście pogrubionym ... użyj atrybutu ol start. Czy to ci nie pomoże? - Boris D. Teoharov
Dzięki za twoją pomoc, ale szukałem sposobu, żeby to zrobić bez deklarowania nowego div lub ul. Okazało się, że muszę to zrobić w logice php, która jest prawdopodobnie lepszym rozwiązaniem pod koniec dnia. - im_benton
Tak, robienie tego w php byłoby łatwiejsze i bardziej kompatybilne z przeglądarką - Boris D. Teoharov
@ BorisD.Teoharov "Zgodny z przeglądarką", nie zrównuję tych rzeczy, nie pytasz przeglądarki, żeby zrobiła cokolwiek związanego z kompatybilnością, jeśli wykonasz cały układ pracy dla to na twoim zapleczu. - ThorSummoner