如何讓兩個並排的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>