将子div与父项右上方对齐,不要重叠

Question

我有一个这样的基本设置:

.container {
  border:1px solid green;
}

<div class="container">

  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
  </div>

  <div class="parent">
    <div class="child">
        <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
  </div>

</div>

我想将.childdiv 对齐到右上角.container.我希望在没有 position:fixed或没有margin-top:-px黑客或改变任何HTML的情况下实现这一点.

这种精神错乱可能吗？

jsFiddle进行测试.

到目前为止我尝试过的

1. 我可以设置float:right为.childdiv,但显然,第一个父div高于它.

2. 我可以设置position:absolute的.childDIV,和top:0和right:0,但它清楚地重叠.

3. 也许flex-box精神错乱是关键？兼容性问题......

Answer 1

您可以将父 div 的显示设置为表格单元格：

.parent {
  display:table-cell;
  vertical-align:top;
}

jsFiddle 示例