如何将另一个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正确对齐，但“搜索”向左和“菜单”顶部对齐稍高一点）

摆脱位置和底部值，仅使用float可使它们各自的边彼此对齐，但是不会将它们放在父div的底部。

我已尽其所能使它们与侧面对齐，但是“搜索” div仍然高于“菜单”（而不是底部）。

这可能是因为其中包含带有输入搜索字段的表单。

EDIT1

：我发现问题是我实际上需要将搜索框对准“搜索”的底部。 我尝试将其添加到.searchbox

.searchbox {
  vertical-align:bottom;
}

但这不起作用，bottom：0px;也无效。

EDIT2

：我找到了解决方案，因为我发现了问题所在。 我必须将此代码添加到分配给输入框的类中

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

现在，它运行完美。 除框外，我在“搜索”中没有任何其他内容，因此使div“搜索”对齐不太麻烦，因为现在输入框与“ head”对齐。 感谢大家！

Answer 1

我尝试这样做，它似乎在Chrome和Firefox中对我有用。 另外，您需要倒数第二个div固定。

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

链接到另一个有助于底部/右侧/左侧样式的线程： 将文本放在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

一个具有两个div的div左右对齐

在CSS文件中尝试一下：

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

Answer 3

使用position:absolute;创建另一个div position:absolute; 并将两个子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> 

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

第二种方法

第三种方法

Answer 4

您可以使用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 5

添加：

.menu{left:0;}

.search{right:0;}