如何让两个并排的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（使用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> 

---

解决方案2（使用相对/绝对位置）

不使用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> 

Answer 2

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

1. 首先，为您的品牌容器分配一个position: relative; 财产和价值
2. 第二，向右浮动徽标
3. 第三，为您要使其底部对齐的容器分配一个position: absolute; 财产和价值

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

Answer 3

您可以尝试使用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 4

尝试在.brand-left div添加line-height

Answer 5

你可以用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 6

以防万一感兴趣而无需display: flex

 #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; } 

 <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>