如何将两个并排的div对齐到底部？

Question

而不是图1，我想要图2.在图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

有很多方法可以做到这一点，最终取决于您尝试完成的工作以及项目要求（例如浏览器支持）。也就是说，一种方法是将你想要底部对齐的元素放在绝对位置。

1. 首先，为您的品牌容器分配position: relative;属性和值
2. 其次，将您的徽标右移
3. 第三步，为您想要底部对齐的容器指定position: absolute;属性和值

以下是一个工作示例：http://codepen.io/mjoanisse/pen/grvBwE

Answer 2

您可以尝试使用display: flex;

.bottom {
  display: flex;
  bottom: 0;
  left: 0;
  position: fixed;
  width:100%;
 }

.right {
  margin-left: auto;
}

<div class="bottom">
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
</div>

Answer 3

尝试在line-height

中添加.brand-left div

Answer 4

您可以使用flexbox

进行尝试

#branding{
  width:100%;
  display:flex;
  height:250px;
    background-color:green;
    align-items:flex-end;
}




.brand-left {
    position: relative;
    width: 730px;
    height:150px;
    background-color:pink;
}

.brand-right {
    text-align: right;
    width: 222px;
     background-color:blue;
     height:250px;
}

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

Answer 5

如果没有display: flex

感兴趣的话

＆＃13;

＆＃13;

#branding {
  width: 100%;
}
.brand-left {
  position: relative;
  float: left;
  width: 750px;
  background: #f00;
  min-height: 250px;
}
.brand-left .nav {
  position: absolute;
  bottom: 0px;
  right: 15px;
}
.brand-left .nav li {
  display: inline;
}
.brand-right {
  text-align: right;
  width: 222px;
  float: left;
  background: #ff0;
  min-height: 250px;
}

＆＃13;

<div id="branding">
  <div class="brand-left">
    <ul class="nav">
      <li><a href="#">Registration</a>
      </li>
      <li><a href="#">Log In</a>
      </li>
    </ul>
  </div>
  <div class="brand-right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;