Принудительно перемещать элементы списка в div после достижения высоты div

Question

У меня есть div с фиксированной высотой и внутри динамического неупорядоченного списка.

В настоящее время элементы списка переполняют div.
Что должно произойти, это переместить элементы списка так, чтобы они не переполняли div.

Answer 1

Вы можете использовать столбцы css3:

вот это jsfiddle

HTML:

<div class="container">
    <ul>
        <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>
    </ul>
</div>

CSS:

.container{
    background: #00f;
    height: 400px;
    width: 200px;
    overflow: hidden;

  -webkit-column-count: 2;  -webkit-column-gap: 15px;
     -moz-column-count: 2;     -moz-column-gap: 15px;
          column-count: 2;          column-gap: 15px;

}
li
{
    background: #ff0;
    height: 45px;
    margin: 5px 0 0 0;
    width: 50px;
}

Answer 2

Вы можете установить для свойства overflow div различные значения.

Вы можете рассмотреть возможность использования hidden, если вы просто хотите сократить список, или, возможно, scroll, если выхотите, чтобы пользователь мог видеть полный список.

#myDiv{
   overflow:hidden;
   height:200px;
}

Пример

Предполагается, что основным критерием является то, чтобы элементы списка не переполнялидела.Если вы хотите, чтобы элементы складывались как-то, то есть разные методы для достижения этого.Основным является разделить ваши li и плавать эти контейнеры.

Об этом есть статья в Отдельный список в Многостолбцовые списки .