当 <img> 位于段落下方时，将图像浮动到段落右侧

Question

我正在寻找仅 CSS 的解决方案（如果可能的话）。所以我的 HTML 没有改变，也没有使用 JavaScript。这是我的 HTML：

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum.
</p>
<img src="http://www.fillmurray.com/284/196">

我的 HTML 是大量标签的一部分，这些<p>标签还包含应看起来像常规段落的常规 。

这是首选结果：

我唯一能想到的就是使用inline-block和的组合float：

p {
  display: inline-block;
  max-width: calc(100% - 284px);
}

img {
  display: inline-block;
  float: right;
}

然而，这个“解决方案”的问题是，当文本的高度大于图像的高度时，文本将不会环绕图像。（参见下面的代码片段作为示例）。

问题：在不更改任何 HTML 的情况下（即：将img标签移到标签上方p），可以做到这一点吗？

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum.
</p>
<img src="http://www.fillmurray.com/284/196">

p {
  display: inline-block;
  max-width: calc(100% - 284px);
}

img {
  display: inline-block;
  float: right;
}

Answer 1

如果图像的尺寸已知，您可以创建一个“假”浮动元素，如下所示。如果之后有任何内容，请不要忘记清除浮动

p {
  float:left;
  margin:0;
}
p:before {
  content:"";
  float:right;
  width:290px; /* width of the image plus a few pixel for margin */
  height:196px; /* height of the image */
}

img {
  float:left;
  margin-left:-284px; /* width of the image */
}

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum.
</p>
<img src="http://www.fillmurray.com/284/196">

:has()仅当图像位于p元素之后时才使用选择器应用样式

p:has(+ img) {
  float: left;
  margin: 0;
}
p:has(+ img)::before {
  content:"";
  float: right;
  width: 290px; /* width of the image plus a few pixel for margin */
  height: 196px; /* height of the image */
}

p + img {
  float: left;
  margin-left: -284px; /* width of the image */
}

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum.
</p>
<img src="http://www.fillmurray.com/284/196">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. Voluptatibus provident, quo at vel vero praesentium ratione eligendi. Ab iure sequi quis est odio nihil a fugit labore, vero omnis cum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis vitae commodi sunt voluptate ut ratione fugit iusto sequi. 
</p>