将元素浮动到其容器的右上角

Question

我有一个无法编辑的HTML文件。

<section>
  <h2>Section heading</h2>
  <p>Paragraph text</p>
  <img src="image.jpg" />
</section>

设计要求照片位于该部分的右上角，如果图像是该部分的顶部子图像，这很容易。不幸的是，所提供的HTML中的图像正好位于HTML部分的底部，因此简单地向右浮动是行不通的。通过一点工作，我发现了如何在用另一个浮动元素伪造流的同时，将div绝对定位在页面流中。

* {
  box-sizing: border-box;
}
section {
  position: relative;
  outline: 1px solid #CCC;
}
div {
  display: inline-block;
  width: 140px;
  height: 140px;
  background-color: green;
  border-radius: 100px;
  position: absolute;
  top: 0;
  right: 0;
}
h2::before {
  content: "";
  display: inline-block;
  float: right;
  width: 150px;
  height: 150px;
  outline: 1px solid red;
}
h2 {
  outline: 1px solid blue;
}

请参阅https://jsfiddle.net/tnxhy0po/3/

• Div-用它来展示小提琴中的图像
• 红色轮廓-右浮动：：在的pesudo元素之前标头
• 蓝色轮廓-页眉轮廓
• 银色轮廓-剖面大纲

现在来解决问题。标题中包含"会见业主，Julie"，Julie应该在单独的一行。如果我限制了页眉的宽度，那么浮动的间隔元素就会包含在页眉的宽度中，这意味着它下面的文本不会流到图像中。

请参阅https://jsfiddle.net/s7eke1gy/16/

我不知道如何使图像浮动在该部分的右上角。把它放在那里很容易，但让它成为流程的一部分却不是。

或者，如果我能找到一些方法让"Julie"移动到下一行，那么当前的浮点+绝对位置解决方案就会起作用。

编辑：在测试时，我将节设置为最大宽度，但忘记删除它。节的宽度是动态的，因此是100%。我已经从这里和jsfiddles中的部分中删除了最大宽度属性。抱歉造成混乱！

Answer 1

如果我理解正确，你想把Julie放在另一行，让文本像上一样浮动https://jsfiddle.net/tnxhy0po/1/

您可以尝试在伪元素前后组合，使用：before包装h2（将Julie移到新的一行）和：在后面换行。

h2::before {
    content: "";
    display: inline-block;
    float: right;
    width: 150px;
    height: 25px;
    outline: 1px solid red;
}
h2::after {
    content: "";
    display: inline-block;
    float: right;
    width: 10px;
    height: 120px;
    outline: 1px solid red;
}

你可以在上看到结果https://jsfiddle.net/s7eke1gy/13/希望我能理解你，这能有所帮助。