html - 如何让两个并排的 div 对齐到底部？

Question

我想要图 2 而不是图 1。在图 1 中，菜单和图像与顶部对齐，但我希望它们与底部对齐。

这是我的 CSS:

 <div id="branding">
      <div class="brand-left"></div>
      <div class="brand-right"></div>
 </div>

#branding {
    display: inline-block;
    width: 100%;
}

.brand-left {
    position: relative;
    float: left;
    width: 730px;
}

.brand-right {
    text-align: right;
    width: 222px;
    float: left;
}

Answer 1

方案一(使用flex)

您可以使用 display: flex 实现此行为。您所要做的就是将此规则添加到您的 branding div 中:

#branding {
    display: flex; /* ADDED */
    align-items: flex-end; /* ADDED */
    width: 100%;
    border: 1px solid green; 
}

这是一个片段

#branding {
    display: flex;
    width: 100%;
    border: 1px solid green;
    align-items: flex-end;
}

#branding > div{
  border: 1px solid blue;
}

.brand-left {
    position: relative;
    float: left;
    width: 730px;
}

.brand-right {
    text-align: right;
    width: 222px;
    float: left;
}

<div id="branding">
        <div class="brand-left">content</div>
        <div class="brand-right">
          <img src="http://senda-arcoiris.info/images/100x100.gif"/>
        </div>
</div>

---

方案二(使用相对/绝对位置)

另一种不使用 flex 的解决方案是从子 div 中删除 floats 并将它们定位为绝对位置。请看下面的片段:

#branding {
    position: absolute;      /* ADDED */
    width: 100%;
    border: 1px solid green;
}

#branding > div{
  position: relative;       /* ADDED */
  display: inline-block;    /* ADDED */
  border: 1px solid blue;
  bottom: 0;
}

.brand-left {
    width: 330px;  /* I changed the width in order to fit in the snippet */
}

.brand-right {
    text-align: right;
    width: 222px;
}

<div id="branding">
        <div class="brand-left">content</div>
        <div class="brand-right">
          <img src="http://senda-arcoiris.info/images/100x100.gif"/>
        </div>
</div>