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元素之前标题。
蓝色轮廓 - 标题大纲。
银色轮廓 - 部分概要

现在出现问题。标题包含单词＆＃34; Meet the Owner，Julie＆＃34;朱莉本来是一个单独的路线。如果为了做到这一点限制标题的宽度，浮动的spacer元素将包含在标题的宽度中，这意味着它下面的文本不会向上流动到图像。

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

我不确定如何让图片漂浮在该部分的右上角。把它放在那里很容易但是它不是流动的一部分。

或者，如果我能找到一些方法来获得当前的浮动+绝对位置解决方案＆＃34; Julie＆＃34;转到下一行。

编辑：测试时，我已将该部分设置为最大宽度，但忘记将其删除。截面的宽度是动态的，因此是100％。我已从此处和jsfiddles中删除了max-width属性。抱歉混乱！

Answer 1

如果我理解正确，你想把朱莉放在一个单独的行上，让文字像https://jsfiddle.net/tnxhy0po/1/上一样浮动

你可以尝试在伪元素之前和之后组合，使用：before to wrap h2 （将朱莉移到新线）和：之后换段。

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/上看到结果希望我理解你，这可以帮助你。

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

1 个答案: