如何定位到右下角而不重叠答案

【问题标题】：How to position to bottom right corner without overlapping如何定位到右下角而不重叠
【发布时间】：2015-12-06 04:42:31
【问题描述】：

当页面太窄时，如何阻止白色的“菜单”div 与“logo”的 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/

我希望“菜单”在没有足够空间时换行，但在窗口足够宽且不重叠时展开。

菜单的底部边缘需要与徽标的底部边缘对齐。菜单的右边缘需要与容器的右边缘对齐。

徽标具有固定的宽度和高度，但我不能依赖菜单的特定高度，因为它取决于字体大小。

【问题讨论】：

标签： css

【解决方案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

由于您似乎希望将一组导航项向右对齐并将徽标向左对齐，因此其他 flexbox 答案也可能对您有所帮助：

Methods for Aligning Flex Items along the Main Axis

请注意，所有主流浏览器都支持 flexbox，except IE 8 & 9。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS：Autoprefixer。

【讨论】：

哇，这太神奇了，我已经好几年没碰过任何 CSS 了……这个 flex box 的东西本来就应该是这样的
是align-self: flex-end实现了'对齐到右下角'的效果吗？
align-self 部分正确。它与底部对齐。尝试其他值：flex-start、center、stretch 和 baseline。
使用justify-content: space-between 将菜单移至右边缘。插图和解释在这里：stackoverflow.com/a/33856609/3597276

【解决方案2】：

我不确定你在问什么，但如果我在附近，请告诉我。我更新了fiddle.。将.menu 作为position: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;
}

【讨论】：