html css - jak utworzyć wiele list kolumn?

Question

Mam "uporządkowaną listę", która zawiera około 100 "elementów listy". Dzięki temu moja strona będzie bardzo długa, a użytkownicy będą musieli przewijać zbyt wiele.

Jak mogę uzyskać UL, aby pokazać jak to:

1.   6.   11. 
2.   7.   12. 
3.   8.   13. 
4.   9.   14. 
5.   10.   15. 

Answer 1

W idealnym świecie można użyć css3 column module, ale niestety obecnie jest on tylko częściowo obsługiwany przez przeglądarki webkit i gecko (za pomocą -webkit i -moz).

Answer 2

Jeżeli nie ma znaczenia kolejność pionową, ale układ:

1.  2.  3.  4. 
5.  6.  7.  8. 
9.  10.  11.  12. 

można po prostu ustawić elementy li to sposób:

li { 
    display: block; 
    width: 25%; 
    float: left; 
} 

Powinien działać. Jeśli potrzebujesz mieć je w pionowej kolejności, musisz działać w skrypcie php, dzieląc je na osobne divy, a następnie unosząc je.

Answer 3

Jakiś czas temu było an article on A List Apart, które dotyczyło dokładnie tego pytania. Zgaduję, że jeśli wspomniano o tym, nie wystarczy oczywiście zawsze powrócić do kodowania po stronie serwera lub kodowania po stronie klienta, aby podzielić listę automatycznie na trzy części.

Answer 4

udało mi się uzyskać właściwej kolejności z odrobiną jQuery:

function splitList($list, n) { 
    var i, k; 
    var colHeight = Math.ceil($list.children().length/n) 
    var colWidth = Math.floor(100/n) + "%" 

    for (i = 0; i < n; i++) { 
     $list.append("<ul class='liCol'></ul>") 
     for (k = 0; k < colHeight; k++) { 
      $list.children("li").eq(0).appendTo(".liCol:last")   
     } 
    } 

    $(".liCol").css("width", colWidth) 
    $list.show() // list originally hidden to avoid displaying before ready 
} 

podstawowe style .liCol:

.liCol { 
    padding: 0px; 
    margin: 0px; 
    float: left; 
} 

Answer 5

Można użyć 2D przemienia: mają szersze poparcie przez nowoczesne przeglądarka niż kolumny CSS3. Zobacz moją odpowiedź tutaj

2 row element layout within horizontal div

Answer 6

ponieważ miałem ten sam problem i nic nie mógł znaleźć „czysty” Myślałem, że napisali moje rozwiązanie. W tym przykładzie używam odwróconej pętli while, więc mogę użyć splice zamiast slice. Zaletą jest teraz splice() wymaga tylko indeksu i zakresu, w którym slice() potrzebuje indeksu i sumy. Ten ostatni zwykle staje się trudny podczas pętli.

Wadą jest konieczność odwrócenia stosu podczas dodawania.

przykład:

cols = 4; liCount = 35

dla pętli z wycinkiem = [0, 9]; [9, 18]; [18, 27]; [27, 35]

zamieniona z łącznikiem = [27, 8]; [18, 9]; [9, 9]; [0, 9]

Kod:

// @param (list): a jquery ul object 
// @param (cols): amount of requested columns 
function multiColumn (list, cols) { 
    var children = list.children(), 
     target = list.parent(), 
     liCount = children.length, 
     newUl = $("<ul />").addClass(list.prop("class")), 
     newItems, 
     avg = Math.floor(liCount/cols), 
     rest = liCount % cols, 
     take, 
     stack = []; 

    while (cols--) { 
     take = rest > cols ? (avg + 1) : avg; 
     liCount -= take; 

     newItems = children.splice(liCount, take); 
     stack.push(newUl.clone().append(newItems)); 
    } 

    target.append(stack.reverse()); 
    list.remove(); 
} 

Answer 7

utworzonego roztworu, który działa również uporządkowanych (ponumerowanych) list. Te listy muszą kontynuować numerowanie w kolumnach.

Dodaj następujący skrypt do swojej strony (nie ma znaczenia, gdzie jest najpiękniejszy w oddzielnym pliku JS):

<script type="text/javascript"> 
// As soon as the document's structure has been loaded: 
document.addEventListener("DOMContentLoaded", function() { 
    // For each html elem: 
    elems = document.getElementsByTagName("*"); // OL and UL wanted: chose all (*) here and select later. 
    for (var e = 0; e < elems.length; e++) { 
     // Check if elem is a list (ordered/unordered) and has class name "cols": 
     if ((elems[e].tagName == "OL" || elems[e].tagName == "UL") && elems[e].className.search("cols") > -1) { 
      // Collect list items and number of columns (from the rel attribute): 
      var list = elems[e]; 
      var listItems = list.getElementsByTagName("LI"); 
      var Ncols = list.getAttribute("rel")*1; // *1 converts rel from string to int. 
      // Determine total number of items, items per column and column width: 
      var Ntotal = listItems.length; 
      var Npercol = Math.ceil(Ntotal/Ncols); 
      var colWidth = Math.floor(100/Ncols)+"%"; 
      // For each column: 
      for (var c = 0; c < Ncols; c++) { 
       // Create column div: 
       var colDiv = document.createElement("DIV"); 
       colDiv.style.cssFloat = "left"; 
       colDiv.style.width = colWidth; 
       // Add list items to column div: 
       var i_start = c*Npercol; 
       var i_end = Math.min((c+1)*Npercol, Ntotal); 
       for (var i = i_start; i < i_end; i++) 
        colDiv.appendChild(listItems[0]); // Using listItems[0] instead of listItems[i], because items are moved to colDiv! 
       // Add column div to list: 
       list.appendChild(colDiv); 
      } 
     } 
    } 
}); 
</script> 

Następnie można po prostu utworzyć wiele list kolumn tak:

<ol class="cols" rel="3"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
    <li>E</li> 
    <li>F</li> 
    <li>G</li> 
</ol> 

Zatem ustawienie class = "cols" i rel = "[number_of_columns]" skrypt wykona resztę!

Answer 8

miałem podobny problem to rano, jeśli trzeba tylko nowoczesnych przeglądarek można zrobić to w ten sposób:

ul 
{ 
    list-style-type: none; 
    counter-reset: section; 

    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    column-count: 3; 
    column-gap: 20px; 
} 

ul li 
{ 
    padding-left: 30px; 
    position: relative; 
} 

ul li:before 
{ 
    counter-increment: section; 
    content: counter(section) "."; 
    margin: 0 0 0 -34px; 
    text-align: right; 
    width: 2em; 
    display: inline-block; 
    position: absolute; 
    height: 100%; 
} 

jsfiddle

Answer 9

Więc szukałem na tym i znaleźć rozwiązanie, które będzie działa we wszystkich przeglądarkach.

Moja lista HTML:

<ol class="list-items"> 
    <li>Item1</li> 
    <li>Item2</li> 
    <li>Item3</li> 
    <li>Item4</li> 
    <li class="second-list">Item5</li> 
    <li class="second-list">Item6</li> 
    <li class="second-list">Item7</li> 
    <li class="second-list">Item8</li> 
</ol> 

Wskazówka dałem ostatnich 4 Pozycji klasę drugiej listy, to jest ważne dla naszego jQuery.

Następny na mojej stronie, zrobiłem div z klasy II-List-appender w drugiej kolumnie, kolumna Chcę moja druga lista, aby być w.

var secondListStart = $(".list-items").children().length - 3; 

$(".second-list-appender").append($("<ol start=" + secondListStart + ">")); 
$(".second-list-appender ol").append($(".second-list")); 
$(".second-list-appender").append($("</ol>")); 

See, I rzeczywiście zrobić 2 Listy z 1, ale sprawiają, że wygląda jak jedna lista w 2 kolumnach, dając początek drugiej listy następnego numeru z poprzedniej listy.

Zrobiłem to z 2 kolumnami, ale możesz po prostu powtórzyć ten proces lub utworzyć funkcję i wywołać ją w pętli, ile razy chcesz ją powtórzyć.

Mam nadzieję, że może to jeszcze pomóc niektórym osobom.