Как позиционировать нижний правый угол без перекрытия

Question

Как остановить белый «меню» div от перекрытия «логотипа» div, когда страница слишком узкая?

<style> 
.container { 
    height: 60px; 
    background: yellow; 
    position: relative; 
} 
.menu { 
    position: absolute; 
    right:0; 
    bottom:0; 
    background: white; 
} 
.logo { 
    width: 300px; 
    height: 60px; 
    background: #99cc99; 
} 
</style> 

<div class="container"> 
    <div class="menu"> 
    menu menu menu menu menu 
    </div> 
    <div class="logo"> 
    logo 
    </div> 
</div> 

Смотрите эту скрипку:
https://jsfiddle.net/932tL785/1/

Я хотел бы «меню» завернуть, когда не хватает места, но разворачивать, когда окно достаточно широк, чтобы не перекрывать друг друга.

Нижний край меню должен быть выровнен с нижним краем логотипа. Правый край меню должен быть выровнен с правым краем контейнера.

Логотип имеет фиксированную ширину &, но я не могу полагаться на определенную высоту для меню, поскольку это зависит от размера шрифта.

Answer 1

Вы можете достичь макет просто и эффективно с помощью CSS flexbox. не

HTML (без изменений)

CSS

.container { 
    height: 60px; 
    background: yellow; 
    display: flex; 
    justify-content: space-between; 
} 

.menu { 
    background: white; 
    order: 1; 
    align-self: flex-end; 
} 

.logo { 
    width: 300px; 
    height: 60px; 
    background: #99cc99; 
} 

DEMO

Так это выглядит, как вы хотите, чтобы ответно выровнять группу навигационных элементов справа и логотип влево, этот другой ответ сотового оператора также может помочь вам:

• Methods for Aligning Flex Items along the Main Axis

---

Обратите внимание, что Flexbox поддерживается всеми основными браузерами, except IE 8 & 9. Некоторые недавние версии браузера, такие как Safari 8 и IE10, требуют vendor prefixes. Чтобы быстро добавить все префиксы, которые вам нужны, разместите свой CSS на левой панели здесь: Autoprefixer.

Answer 2

Я не уверен, что вы просите, но скажите, если я поблизости. Я обновил fiddle.. положив .menuposition:relative; и menu div в конце html код.

<div class="container"> 
<div class="logo"> 
    logo 
</div> 
</div> 
<div class="menu"> 
    menu menu menu menu menu 
</div> 

и CSS

.container { 
    height: 60px; 
    background: yellow; 
    position: relative; 
} 
.menu { 
    position: relative; 
    bottom:0; 
    background: white; 
} 
.logo { 
    width: 300px; 
    height: 60px; 
    background: #99cc99; 
}