沿底部將兩個內聯div對齊

Question

我希望沿着容器的底部動態對齊以下兩個元素，以使它們占據相對的角。 類似於Stackoverflow Logo和“ Ask Question的底部對齊方式，但位於其容器的相對角上。

您可以在這里看到JFiddle測試用例： http : //jsfiddle.net/M5BuZ/

更有趣的是，我希望此方法無需在right元素上添加固定的邊距空間。 這樣，如果left元素的高度應增加，則將保持對齊。

Answer 1

聽起來像左元素將是唯一一個高度變化的元素？ 如果是這種情況，則應根據您的jsfiddle解決您的情況：

#container {
  border: 1px solid red;
  float: left;
  width: 400px;
  position: relative;
}
#left, #right {
  border: 2px solid red;
  background: #ccc;
  vertical-align: bottom;
  display: inline-block;
  /* ie6/7 */
  *display: inline;
}
#right {
  padding: 20px;
  width: 100px;
  position: absolute;
  right: 0;
  bottom: 0;
}

因此，將容器位置設為：相對； 將使您能夠將右側元素放置為絕對位置，並將其放置在所需的位置，而不會影響容器的行為（這還假設左側元素的高度始終大於右側元素的高度）。

編輯：新的jsFiddle