html – 将父div上方的子div对齐到右边,不要重叠

概述我有一个这样的基本设置： .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 我有一个这样的基本设置：

.container {  border:1px solID green;}

<div >  <div >    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 >    <div >        <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 >  <div >    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 >    <div >      <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>

总结

以上是内存溢出为你收集整理的html – 将父div上方的子div对齐到右边,不要重叠全部内容，希望文章能够帮你解决html – 将父div上方的子div对齐到右边,不要重叠所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。