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

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

Answer 2

我不确定你在问什么，但告诉我我是否在附近。我更新了fiddle.。将position:relative;设为menu，将html div设置为<div class="container"> <div class="logo"> logo </div> </div> <div class="menu"> menu menu menu menu menu </div>代码的末尾。

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

和css

keypress

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

2 个答案: