Html 如何以负责任的态度塑造一个悬而未决的英雄形象

我正试图重现这个英雄悬垂的形象，我已经设法在一个绝对相对于右手弯曲柱的位置上使用了右负号，但由于明显的原因，这不起作用，关于如何实现这一点，有什么想法吗

我试图创造的画面-

这是我的一段代码-

这是Kicker文本
这是一个图像标题
Lorem ipsum dolor sit amet，是一位杰出的足球运动员。克拉斯·塞德·萨皮恩·夸姆。在posuere turpis Adipising，这是一个最先进的设施。一对一对地坐着，这是一种很好的调味品。Donec aliquam augue nec孕妇lobortis。这是我的梦想，我的梦想，我的梦想。不要忘记妊娠期的缺陷

看看您的屏幕截图，我认为通过将图像向右浮动来获得这种布局应该相当简单，没有任何绝对位置。您可能也可以通过这种方式实现底部的悬垂——通过在文本上放置蓝色背景，其容器仍然会拉伸页面的整个宽度，即使行框被缩短以允许浮动图像

---

我认为这将有助于解决您的响应性问题，如果我理解正确的话，这一问题来自绝对定位。

At您应该尝试自己编写代码。之后，如果你有问题，你可以张贴你已经尝试了一个明确的解释什么是不工作，并提供一个解决方案。我建议你读一个好的问题和答案。另外，一定要拿着这本书读一读。我想如果你仔细看看我已经做到了这一点的问题——我附上了一张我想要达到的目标的图片，我附上了一把小提琴来向你展示我是如何做到这一点的。现在我正在征求意见，这是一个向社区提出的问题，因为我已经实现了我想要的，但它没有回应。我也想看看其他人是如何实现我想做的事情的。你在说什么悬念？从这张图片中，我假设你说的是图片的底部部分，它与这一部分下面的白色区域重叠。。。但是我不知道你为什么说“使用权利”可以达到这个目的。另外，如果您抱怨它没有响应，那么您也应该告诉我们您希望它在小屏幕上显示什么样子。在320px的移动屏幕上，文本和图像相邻可能没有多大意义-那么接下来会是什么呢？因为图像也在右侧悬垂，如果你看一下JSFIDLE，容器上的最大宽度为2900px，当减小屏幕大小时，它只需要缩小，而不需要重叠，它在320px下看起来像什么并不重要，因为它只是堆叠在彼此的顶部，所以如何创建负绝对对象，但保持它的响应而不与视口重叠，因为-右侧我已经更新了关于这个问题的图像，以便更好地理解它也悬在容器上的事实。

  <div class="pg-LandingHero">
    <div class="pg-LandingHero_Inner">
      <header class="pg-LandingHero_Header">
        <p class="pg-LandingHero_Kicker">This is kicker text</p>
        <h1 class="pg-LandingHero_Title">This is an image title</h1>
      </header>
      <div class="pg-LandingHero_Body">
        <div class="pg-LandingHero_Columns">
          <div class="pg-LandingHero_Column pg-LandingHero_Column-content">
            <p class="pg-LandingHero_Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia.</p>
            <a href="#" class="pg-LandingHero_Link">This is a link</a>
          </div>
          <div class="pg-LandingHero_Column pg-LandingHero_Column-image">
            <div class="pg-LandingHero_Item">
              <div class="pg-LandingHero_ImageContainer">
                <div class="pg-LandingHero_Image">
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>