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

前端之家收集整理的这篇文章主要介绍了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 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>
原文链接:https://www.f2er.com/html/230130.html

猜你在找的HTML相关文章