Étiquette : float: left;

Source : http://stackoverflow.com/questions/18260931/how-can-i-break-a-single-list-into-multiple-columns-semantically et http://jsfiddle.net/kevinPHPkevin/MKL4g/131/.

<ul>
  <li>Post 1</li>
  <li>Post 2</li>
  <li>Post 3</li>
  <li>Post 4</li>
  <li>Post 5</li>
  <li>Post 6</li>
  <li>Post 7</li>
  <li>Post 8</li>
  <li>Post 9</li>
</ul>

(function($) {

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

//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></ul>').next().html(ListHTML);

})(jQuery);

ul{
 float: left;  
 padding: 10px;    
}