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

Posted 2023-03-05

【中文标题】当 <img> 位于段落下方时，将图像浮动到段落的右侧[重复]

【英文标题】：float image to the right of paragraph when <img> is below the paragraph

【发布时间】：2022-01-23 23:29:38

【问题描述】：

我正在寻找纯 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;

这个“解决方案”的问题是，当文本的高度大于图像的高度时，文本不会环绕图像。 （参见下面的 sn-p 示例）。

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

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


img 
  display: inline-block;
  float: right;

<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">

【参考方案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">

【讨论】：

粘贴后 2 秒后，您可以将 HTML 嵌套在具有静态高度和宽度的容器中以查看更改，或者只是调整大小！

这是一个不错的解决方案，但在我的情况下，我有一个问题：图像和文本是包含多个 <p> 标记的大量 HTML 的一部分，它们后面并非都有图像.因为 CSS 中没有“前一个”选择器来定位图像之前的任何

@DirkJ.Faber 很好，包括所有细节以获得准确的答案...

@DirkJ.Faber 您所做的编辑没有帮助。我们需要知道您的 HTML 结构，否则我们无法给出解决方案，因为解决方案是链接到您的特定代码

问题是，HTML 结构会根据数据发生变化。可以有多个`<p>标签和<h*>标签。