Как создать вертикальный список элементов в CSS?

Question

Предположим, у вас есть список предметов, и поместите их в div.Список генерируется динамически, а количество элементов неизвестно.

CSS:
div#container {
    width:500px;
}
div.item {
  width:150px;
  float:left;
}

HTML:
<div id="container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    .
    .
    .
</div>

Вывод браузера выглядит следующим образом:

элемент 1 элемент 2 элемент 3
элемент 4 элемент 5 элемент 6
.,,,,,

Как создавать вертикальные столбцы, такие как:

элемент 1 элемент 4
элемент 2 элемент 5
элемент 3 элемент 6
.,,

Answer 1

@ B Семь;для этого вы можете использовать свойство css3 column-count.

Например:

#multicolumn1 {
        -moz-column-count: 2;
        -moz-column-gap: 50%;
        -webkit-column-count: 2;
        -webkit-column-gap: 50%;
        column-count: 3;
        column-gap: 50%;

}

проверить эту ссылку для демонстрации Div в двух столбцах

http://jsfiddle.net/sandeep/pMbtk/

примечание: в IE не работает.

Answer 2

еще раз +1 к sandeep люблю его решение, используя css3

Вы также можете проверить эту ссылку: Проверьте это

Answer 3

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

Я бы использоваллибо два div, плавающий влево и вправо, и разрывы строк для размещения элемента под другим, переход к вставке во второй div (например, $ ('# seconddiv'). append ('Item 4');

или я бы использовал таблицу. Если вам нужна какая-то обработка каждого элемента, поместите их в свои собственные элементы div или span, или ячейки. Затем вы можете оформить их и щелкнуть по ним отдельно.

Answer 4

CSS:

.tableDiv,
        .rowDiv
        {
            width:400px;
            float:left;
        }       
        .clDiv200
        {
            width:200px;
            float:left;
        }

HTML:

 <div class="tableDiv">
        <div class="rowDiv">
            <div class="clDiv200">Item 1</div>
            <div class="clDiv200">Item 4</div>          
        </div>
        <div class="rowDiv">
            <div class="clDiv200">Item 2</div>
            <div class="clDiv200">Item 5</div>          
        </div>
        <div class="rowDiv">
            <div class="clDiv200">Item 3</div>
            <div class="clDiv200">Item 6</div>          
        </div>
    </div>

Это будет работать во всех браузерах, хорошо ..