如何将另一个 div 内的 2 个 div 对齐到底部和左/右

Question

我有这个代码

HTML

  <div class="head">
    <div class="menu">
    </div>
    <div class="search">
    </div>
  </div>

CSS

.head {
    height:110px;
    position:relative;
}
.menu {
    float:left;
    position:absolute;
    bottom:0px;
}
.search {
    float:right;
    position:absolute;
    bottom:0px;
}

我要做的是将div "menu" 放在div "head" 的左下角，将div "search" 放在div "head" 的右下角。

当我使用 "menu" 和 "head" 的位置和底部值时，它会完美地对齐菜单，但是当我尝试使用 "search" 做同样的事情时，它会将它扔到 "menu" 的顶部偏移一点。

这是一个图片示例 https://i.stack.imgur.com/KBUxw.png （“菜单” div 正确对齐，但“搜索”向左对齐，“菜单”顶部稍高）

去掉 position 和 bottom 值，只使用 float 将它们各自的边对齐，彼此内联，但不会将它们放在父 div 的底部。

我已经让它们与两侧对齐，但“搜索”div 仍然高于“菜单”（而不是在底部）。

这可能是因为它有一个带有输入搜索字段的表单。

编辑1

：我发现问题在于我实际上需要将搜索框与“搜索”的底部对齐。我尝试将此添加到 .searchbox

.searchbox {
  vertical-align:bottom;
}

但这不起作用，bottom:0px; 也不起作用。

编辑2

：我找到了解决方案，因为我发现了问题实际上是什么。我不得不将此代码添加到分配给输入框的类中

position: absolute;
right:    0;
bottom:   0;

现在它运行良好。除了框外，“搜索”中没有任何其他内容，因此对齐 div“搜索”并不是什么大问题，因为现在输入框与“头部”对齐。谢谢大家！

Answer 1

我试过这样做，它似乎在 Chrome 和 Firefox 中对我有用。此外，您的倒数第二个关闭 div 需要修复。

Codepen：https://codepen.io/jhhboyle/pen/BZQVvO

链接到对底部/右侧/左侧样式有帮助的另一个线程： Put text at bottom of div

HTML：

<div class="head">
    <div class="menu">
      Content
    </div>
    <div class="search">
      COntent
    </div>
</div>

CSS：

.head {
    height:110px;
    position:relative;
    background-color:green;
}
.menu {
    font-size:18px;
    position:absolute;
    bottom:0px;
    background-color:red;
}
.search {
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:blue;
}

Answer 2

A div with two div's align left and right bottom

在 CSS 文件中试试这个：

.head {
    height:110px;
    position:relative;
}
.menu {
    float:left;
    position:absolute;
    bottom:0px;
}
.search {
right:0px;
    float:right;
    position:absolute;
    bottom:0px;
}

Answer 3

您可以使用display: flex; 将 div 对齐到左下角和右下角。

.head {
  height: 110px;
  position: relative;
  display: flex;
  align-items: flex-end;
  border: 1px solid black;
  box-sizing: border-box;
}
.menu {
  font-size: 18px;
}

.menu, .search {
  flex: 0 0 50%;
  max-width: 50%;
  border: 1px solid red;
  box-sizing: border-box;
}

<div class="head">
  <div class="menu">
    Menu
  </div>
  <div class="search">
    Search
  </div>
</div>

Answer 4

使用 position:absolute; 创建另一个 div 并将两个子 div 放入其中。

css

.box {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  border-top:1px solid;
}
    .menu {
  font-size: 18px;
  float: left;
  margin-left: 10px;
}

.search {
  float: right;
  margin-right: 10px;
}

HTML

<div class="box">
   <div class="menu">
          hello
    </div>
    <div class="search">
          bye
     </div>
</div>

.head {
  height: 110px;
  border-radius: 2px 2px 0px 0px;
  position: relative;
  border: 1px solid;
}

.box {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  border-top:1px solid;
}

.menu {
  font-size: 18px;
  float: left;
  margin-left: 10px;
}

.search {
  float: right;
  margin-right: 10px;
}

<div class="head">
  <div class="box">
    <div class="menu">
      hello
    </div>
    <div class="search">
      bye
    </div>
  </div>
</div>

这是获得相同效果的另一种方法

2nd way to do this

3rd way to do this

Answer 5

添加这个：

.menu{left:0;}

.search{right:0;}