如何将文本环绕在父元素底部的图像

how to wrap text around an image at the bottom of the parent

本文关键字:元素 底部 图像 文本      更新时间:2023-09-26

当元素位于父元素的底部时,我如何使段落文本环绕图像或任何其他元素?

标记:

<div class='post'>
   <p class='post-content'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet
      condimentum pulvinar. Pellentesque mattis fringilla dui, sit amet adipiscing augue
      elementum eget. Fusce ut dapibus neque. Quisque mattis lectus ac justo euismod
      luctus. Donec auctor volutpat rhoncus. Duis lacinia sodales sem ut placerat. Donec
      sodales, urna vitae dapibus mattis, turpis velit bibendum enim, in auctor elit neque
      in augue.
      <img src="" style="width:5em; height:5em; float:right;"/>
   </p>
</div>

请假定文本和图像位于父div中。我想如果你能让一个元素从右到下浮动,那就容易多了。

我想要的样子:

Lorem ipsum dolor sit amet, consecteturadipiscing elit. Quisque imperdiet
condimentum pulvinar. Pellentesquemattis fringilla dui, sitametadipiscing augue
elementum eget. Fusce ut dapibus neque.Quisque mattis lectus ac justo euismod
luctus. Donec auctor volutpat rhoncus. ______________________________________
Duis lacinia sodales sem ut placerat.  |                                     |
Donec sodales, urna vitae dapibus      |                                     |
mattis, turpis velit bibendum enim,    |                                     |
in auctor elit nequein augue.          |                the image            |
text text asjdjaskd asjkdh aks asdj    |                                     |
sahdahd jas asjksj haskdhsjad sjj      |                                     |
alsja asdajdkj j sjjakks asj h h gs    |                                     |
sss the text is wrapped here text t    |_____________________________________|

任何想法?

使用CSS:

align

在img标签中,参见下面的示例:image-text-wrap-css-html