html - 沿底部对齐两个内联 div，在两侧

Question

我希望沿容器底部动态对齐以下两个元素，使它们占据对角。类似于 theStackoverflow Logo和 theAsk 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