Это возможно со списками?

Question

Мне интересно, возможно ли составить такой список:

Или я должен просто использовать div для достижения того же самого?

Answer 1

Это возможно с помощью чистого CSS (с плавающей точкой), чтобы получить список вроде:

LI1    LI2
LI3    LI4
LI5    LI6

но получить:

LI1    LI4
LI2    LI5
LI3    LI6

вам нужно использовать javascript или 2 списка со стилем CSS. (РЕДАКТИРОВАТЬ: или, как упоминает другой ответ cale_b, для современных браузеров вы можете использовать column-count)

CSS для моего первого сценария будет выглядеть примерно так:

ul { width:400px; overflow:hidden; margin:0; padding:0; }
li { width:200px; float:left; margin:0; padding:0; }

отрегулируйте ширину, поля и отступы по своему вкусу

Answer 2

Конечно.Зависит от того, хотите ли вы, чтобы элементы спускались первыми в столбцах, или если они могут течь слева направо.

Если слева направо все в порядке, просто назначьте отображение: block, float: leftи ширина элементов li:

li {
    display: block;  
    width: 150px;  
    float: left;  
}

Если вы хотите, чтобы он спускался сначала вниз, а затем вправо, то для современных браузеров есть несколько методов, включающих подсчет столбцов css3 (толькоработает в современных браузерах):

ul {
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;
} 

Ваш третий вариант - использовать два списка бок о бок,

Или, как вы упоминаете, divs.

Answer 3

Легко возможно со списками. Вы пробовали?

Это просто вопрос CSS.

Удар в темноте:

ul { list-style: none; width: 400px; background: #eee; }
li { display: inline-block; float: left;margin: 10px; width: 158px; background: #eee;border: 1px solid #aaa;height: 100px; }​

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

Демо здесь

Answer 4

Полагаю, вы могли бы, но два div с одним списком, я думаю, сработали бы лучше.