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"之上1}}偏移一点。

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

去除位置和底部值并使用只是浮动将每个对齐彼此内嵌的各自的边，但它不会将它们放在父div的底部。

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

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

EDIT1

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

.searchbox {
  vertical-align:bottom;
}

但这不起作用，底部也不起作用：0px;。

EDIT2

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

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

现在它完美无缺。我在“搜索”中没有任何其他内容，除了框，因此对齐div“搜索”并不是太大的交易，因为现在输入框正在对齐“head”。谢谢大家！

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

使用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 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;}

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

5 个答案: