Перестановка позиций меню DIV при изменении ширины

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

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

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

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

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

Любые предложения?

Спасибо.

источник

2013-06-12 user2456566

Что у вас есть? – Artemix

Должны ли пункты меню заполнять всю ширину меню? Или это статическая ширина? Вы можете просто поместить элементы меню, оставшиеся в меню div. –

Что я до сих пор представляет собой список элементов меню UL. Элементы меню не должны заполнять всю ширину. Только 5 предметов и желательно нажать на правую сторону окна (так как логотип будет слева). Но по мере уменьшения ширины браузера конец меню должен опускаться до тех пор, пока он не станет настолько узким, что все они будут вертикальными. – user2456566

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/

источник

2013-06-12 13:55:29 Syd

Спасибо PGR - как только я изменил минимальную ширину от 200 до 100, она работала как шарм! Большое спасибо. – user2456566

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

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

источник

2013-06-12 13:50:10 Optox

Перестановка позиций меню DIV при изменении ширины

ответ

Смежные вопросы