Как я могу разбить один список на несколько столбцов семантически?

Question

Нынешний подход наш сайт использует разбить один список в несколько колонок является использование нескольких ul S:

<ul> 
    <li>one</li> 
    <li>two</li> 
</ul> 
<ul> 
    <li>three</li> 
    <li>four</li> 
</ul> 

Это не кажется идеальным для меня, так как семантически, это не два списка, это один , Я видел много неадекватных решений для списков с несколькими столбцами. Я ищу решение, которое:

1. использует следующую структуру разметки

   <ul> 
       <li>one</li> 
       <li>two</li> 
       <li>three</li> 
       <li>four</li> 
   </ul> 
   

2. Организует так:

   one three 
   two four 
   

   Не так:

   one two 
   three four 
   

3. Работы без изменений, если изменения длины списка, или если элементы переносят несколько строк.

4. Использует действительный семантический HTML.
5. Работает до IE8.

Идеальное решение - только CSS, но я открыт для использования jQuery UI или легкого Javascript.

(. PS, here's my CSS attempt, с заметными проблемами)

Edit: Этот вопрос относится только к семантических списков. Другой, предположительно «дублирующий» вопрос касается <div> элементов, который является другим мячом, потому что допускается дополнительная разметка. Никакая дополнительная разметка не допускается между <ul> и <li>. Этот вопрос сфокусирован на семантике, что означает, что акцент делается на использовании HTML, чтобы указать с максимально подробными сведениями о содержании.

Answer 1

К сожалению ответить на мой собственный вопрос, но я думаю, что я получил только CSS-решение.

Here it is on jsFiddle.

В основном, я использую общий селектор (это символ: ~, работает in IE7 тоже!), Чтобы выделить все элементы после точки останова и переместить их вверх и вверх. Пока вы устанавливаете высоту линии, кажется, что перекрестный браузер работает до IE7.

HTML:

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li class="newline">three</li> 
    <li>four</li> 
</ul> 

CSS:

.newrow, 
.newrow ~ li { 
    margin-left: 120px; 
    margin-top: -100px; 
    margin-bottom: 100px; 
} 

я упускаю что-то очевидное здесь?

Answer 2

CSS Columns - лучшее решение, но не работает для старых браузеров. Вы можете использовать nth-child, чтобы сделать что-то близко, но вы не получите список разделов (вам также понадобится полиполк, чтобы использовать его в старых браузерах). Самое простое решение, вероятно, было бы javascript - оно разделило бы списки, но также оставило бы ваш код чистым. Вот функция для преобразования списков в любое количество столбцов.

http://jsfiddle.net/UrH69/

SCRIPT

$.fn.extend({ 
    list2Columns: function(numCols) { 
     var listItems = $(this).find('li'); /* get the list data */ 
     var listHeader = $(this); 
     var numListItems = listItems.length; 
     var numItemsPerCol = Math.ceil(numListItems/numCols); /* divide by the number of columns requires */ 
     var currentColNum = 1, currentItemNumber = 1, returnHtml = '', i = 0; 

     /* append the columns */ 
     for (i=1;i<=numCols;i++) { 
      $(this).parent().append('<ul class="column list-column-' + i + '"></ul>'); 
     } 

     /* append the items to the columns */ 
     $.each(listItems, function (i, v) 
     {  
      if (currentItemNumber <= numItemsPerCol){ 
       currentItemNumber ++; 
      } else { 
       currentItemNumber = 1; 
       currentColNum ++; 
      } 
      $('.list-column-'+currentColNum).append(v); 
     }); 
     $(this).remove(); 
    } 
}); 

ПРИМЕНЕНИЕ

$('ul').list2Columns(2); // Change this number to change num of columns 

HTML

<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li>four</li> 
    <li>five</li> 
    <li>six</li> 
</ul> 

CSS

.column { float:left; } 

Answer 3

Вы можете использовать столбцы для браузеров, которые поддерживают

DEMO http://jsfiddle.net/kevinPHPkevin/eaewX/33/

Ниже приведен пример JQuery для полной поддержки браузера

DEMO http://jsfiddle.net/kevinPHPkevin/MKL4g/131/

var postsArr = new Array(), 
    $postsList = $('ul.posts'); 

//Create array of all posts in lists 
$postsList.find('li').each(function(){ 
    postsArr.push($(this).html()); 
}) 

//Split the array at this point. The original array is altered. 
var firstList = postsArr.splice(0, Math.round(postsArr.length/2)), 
    secondList = postsArr, 
    ListHTML = ''; 

function createHTML(list){ 
    ListHTML = ''; 
    for (var i = 0; i < list.length; i++) { 
     ListHTML += '<li>' + list[i] + '</li>' 
    }; 
} 

//Generate HTML for first list 
createHTML(firstList); 
$postsList.html(ListHTML); 

//Generate HTML for second list 
createHTML(secondList); 
//Create new list after original one 
$postsList.after('<ul class="posts"></ul>').next().html(ListHTML); 

Answer 4

"Правильный" способ сделать это было бы использовать CSS3 столбцы:

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
• http://davidwalsh.name/css-columns

Но это будет только вам IE10.

Я бы порекомендовал идти по этому маршруту, а затем с помощью прокладок IE и javascript o обрабатывал IE9 и IE8. Я забыл, но modernizr может обеспечить прокладку для помощи вам.

Answer 5

вы можете использовать CSS-столбец счетчик для что это демо работает только в хроме, но вы можете сделать это кросс-браузер

http://jsfiddle.net/UuwKC/

ul {-webkit-column-count:2}