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

Posted 2023-03-05

【中文标题】如何将另一个 div 内的 2 个 div 对齐到底部和左/右

【英文标题】：How can I align 2 divs inside another div to the bottom and to the left/right

【发布时间】：2017-11-18 17:38:58

【问题描述】：

我有这个代码

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“搜索”并不是什么大问题，因为现在输入框与“头部”对齐。谢谢大家！

【参考方案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;

【讨论】：

我会修复标签，但这只是我在这里写的一个示例。我摆脱了 CSS 中的浮动，但搜索仍然不会移动到底部。我认为这可能是因为它有一个带有搜索框的表单。我将在原始帖子中添加详细信息。

这行得通，但我的搜索框有问题。我在第一篇文章中包含了详细信息。谢谢你的时间:)

【参考方案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;

【参考方案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>

【讨论】：

此代码有效，但我的“搜索”div 从底部偏移了大约 10 个像素。 “搜索”中有一个带有输入框的表单。里面没有按钮或中断。

【参考方案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

【讨论】：

感谢分享，但这似乎很乱，添加了另一个 div。这是一种实用的做法还是草率？

这是一个实用的方法，因为你想要底部的两个 div 所以我为两者创建了一个父 div。

如果您不想执行上一个检查更新答案，我会尝试另一种解决方案。

【参考方案5】：

添加这个：

.menuleft:0;

.searchright:0;

【讨论】：

这将“搜索” div 向右移动了，但它仍然没有与底部对齐。