我如何使文本块位于图像响应顶部？

Question

我正在使用内嵌CSS编码我的个人网站（CMS不支持非内嵌CSS），我正努力使自己的设计在移动设备上具有响应能力。

[它在iPad和台式机上看起来很棒，但是在移动制作中看起来很糟糕，因为它超出了网站本身的宽度。

Here is how it looks like on desktop

这是我当前正在使用的代码：

<div style="position:relative;font-family:Lato;" >

<img src="https://images.unsplash.com/photo-1589503099580-00dc088a0081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80" alt="Nature" style="width: 100%">

<div class="text-block" style="position:absolute;top:150px;right:90px;left:650px;background-color:white;color:black;padding-top:10px;padding-bottom:20px;padding-left:20px;padding-right:20px;width:100%;" >

<h2><div style="font-size: 45px; line-height: 76px;"><font color="#f56b00"><b>Lorem Ipsum</b></font></div></h2>

<div style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
</div>

我希望文本框位于底部或图像内，从而具有移动响应性。我试过增加width：100％;在填充之后，并且在标头的div样式内，但仍不起作用。

非常感谢。

Answer 1

这里是建议如何实现的。