css - отображать неупорядоченные списки в трех столбцах

Question

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

Количество элементов в каждом списке также отличается от списка к списку итакже неизвестно.Я хотел бы совет по маркировке этого.Можно ли использовать здесь таблицу или есть лучшее решение CSS?

Спасибо!

Answer 1

UPDATE:

Извините, незначительная корректировка - вам нужно очистить каждый из UL, и я бы использовал псевдоселектор CSS3 nth-child для очистки каждого 4-го ul. Обновили также JS Fiddle

Попробуйте что-то вроде этого ...

CSS:

    #container
{
    width: 600px;
}

#container ul 
{
    width: 200px;
    float: left;
    margin-bottom: 20px;
}

ul:nth-child(4n) {
    clear:left;
}

.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }

HTML:

<div id="container">
    <ul class="cf">
    <li>foo</li>
    <li>bar</li>
    <li>bar</li>
            <li>bar</li>
            <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
<ul class="cf">
    <li>foo</li>
    <li>bar</li>
</ul>
</div>

Вот ссылка JSFiddle на вышеуказанное: http://jsfiddle.net/beardtwizzle/9EALs/1/

Answer 2

Вы можете использовать div с CSS, здесь вы найдете практический пример.