Изменить положение пунктов меню DIV при изменении ширины

Question

Скажем, у меня есть строка меню в верхней части моей веб-страницы.

Каждый пункт меню находится в своем собственном DIV, и они расположены горизонтально, с каждым элементом меню DIV рядом.

Теперь, когда вы уменьшаете ширину браузера, наступает момент, когда ширина браузера будет меньше ширины этой строки меню.

Что я хотел бы сделать, так это чтобы последний элемент меню (DIV) перемещался вниз на следующую строку, когда это происходит, и каждый последующий последний элемент меню делает то же самое, что ширина браузера продолжает уменьшаться, пока все пункты меню в конечном итоге сложены сверху вниз.

Я не уверен, как это сделать с помощью CSS.

Какие-либо предложения?

Благодарю.

Answer 1

HTML:

<div id="container">
        <ul>
            <li>
                Menu1
            </li>
            <li>
                Menu2
            </li>
            <li>
                Menu3
            </li>
            <li>
                Menu4
            </li>
            <li>
                Menu5
            </li>        
        </ul>
    </div>

CSS:

#container{
    width:100%;
    min-width:200px;
    background-color:green;
}

#container ul li{
    width:50px;
    height:22px;
    background-color:red;
    border:1px solid black;
    list-style:none;
    text-align:center;
    display:inline-block;
} 

демо:

http://jsfiddle.net/jU44m/

Answer 2

Для этого все элементы меню должны быть в одном большем элементе div, и чтобы этот размер изменялся при изменении размера страницы, установите значение ширины в процентах. Установите значение высоты этого div на auto, чтобы оно расширялось при падении элементов (изменение размеров можно выполнить с помощью padding) следующим образом:

#menu {
    width: 50%;
    height: auto;
}