li элемент дисплей встроенный в столбцы (сетка)

Question

У меня есть <li> элементов внутри <ol> и хотел бы отобразить его, как показано ниже; может ли кто-нибудь дать мне код css для достижения этого? Я создал эти <li> элементы с PHP, так что HTML выглядит следующим образом:

<ol> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
    <li>9</li> 
    <li>10</li> 
    <li>11</li> 
    <li>12</li> 
</ol> 

, и я хотел бы, чтобы отображаться как это:

http://www.jqueryscript.net/demo/Accessible-Touch-Friendly-Drag-Drop-Html-List-with-jQuery/

Выше приведен пример , с jQuery, с этим я работаю редактором каналов и хотел бы получить это как на изображении. Я пробовал с дисплеем inline, шириной и высотой, но не пошел, поэтому я не могу заставить его работать.

Answer 1

Хотя это не лучшее для старых версий IE, единственным способом, который я знаю для достижения желаемых результатов, является использование элемента CSS3 column-count.

CSS

li{ 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
}