我有一个这样的基本设置：
.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>
我想将.child div与.container的右上角对齐.我想实现这个没有position：固定或一些margin-top：-px hack或更改任何HTML.
这是疯狂吗
jsFiddle进行测试.
到目前为止我已经尝试过
>我可以设置float：右边的.child div,但显然,第一个父div在上面.
>我可以设置位置：绝对到.child div,顶部：0和右：0,但它清晰地重叠.
>也许flex-Box疯狂是关键？虽然兼容性问题…
解决方法
您可以在.parent中使用calc()以及.child中的position：absolute,通过阅读您的注释,它不会有第二个父级有问题的内容.
.container {
border: 1px solid green;
position: relative;
min-height: 200px;
}
.parent {
max-width: calc(100% - 220px) /* img width + some margin */
}
.child {
position: absolute;
top: 0;
right: 0;
}
<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>
<p>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.</p>
<p>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.</p>
</div>
</div>
