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

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

正如 feela 所说，使用职位是您实现这一目标的方式。

.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