沿两侧的底部对齐两个内联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