如何将两个左右对齐文本的底部与父容器的底部对齐？

Question

想象一下你有这个：

<div class="parent_with_height200px">
  <div class="left">This is the left floated text, size 12px</div>
  <div class="right">This is the right floated text, size 40px</div>
</div>

如何让两个文本“站在”父div的底部，使其基线彼此对齐？

改变css / html是完全可以的，这是我想要的结果。

Answer 1

正如费耶拉所说，使用职位就是你将如何实现这一目标。

.parent_with_height200px {
    height: 200px;
    position: relative;
    background-color: #DDDDDD;
    }

.left {
    width: 50%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: #999999;
    }

.right {
    width: 50%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: #444444;
    }

请参阅此处的输出：Example

Answer 2

这是你要找的吗？

.left {
    float:left;
    width:50%;
}
.right {
    float:left;
    width:50%;
}