如何在放置在文本块末尾的图像周围换行？

Question

我想做的事在此图中的“向右浮动”插图中显示，该插图在https://css-tricks.com/all-about-floats/处打开帖子：

我想将图像放置在文本块的末尾，以使图像的底部与文本最后一行的基线对齐，向上推入文本并使其周围流动。

但是，使用float:right指令，我能获得的最好的效果是，该图像悬挂在该段落的底部，而不是向上插入该段落的底部，如图所示。

在很多地方都有关于如何使用float:left描述，但是我在CSS-TRICKS帖子中，此处或其他地方都找不到任何内容，它说明了如何使用float:right实现图像周围文本的定位和换行-这就是我正在努力实现。

有人知道怎么做吗？

Answer 1

简而言之，如果不进行某些标记更改（左浮动或右浮动），就无法实现所需的精确外观。

左浮动在第一个图像上起作用的原因是，浮动元素在其周围“流动”之后将具有块级内容。 如果您在第一个图像上以右浮动开始，则将获得相同的效果。 因此，当您将图像放在块级内容（段落）的末尾时，周围没有任何东西可流动。

您可以通过输出最后一张图像来获得相似的外观，同时还需要保留一些内容。 例如：

https://codepen.io/andrewborem/pen/PjyNyY

相关代码：

 div { max-width: 750px; margin: 0 auto; font-size: 1.125em; } img.left { float: left; margin: 0 0.5em 0.5em 0; line-height: 0; } img.right { float: right; margin: 0.5em 0 0.5em 0.5em; line-height: 0; } 

 <div> <img class="left" src="https://placehold.it/400x300" /> <p>Bacon ipsum dolor amet tenderloin sirloin pork belly alcatra, flank cow pig. Chicken rump andouille bacon, turkey strip steak pastrami salami chuck shank flank ball tip. Pork belly doner salami alcatra tail strip steak. Tongue boudin leberkas brisket burgdoggen capicola tri-tip corned beef filet mignon pancetta strip steak short ribs. Biltong drumstick jerky, filet mignon bresaola t-bone sirloin tail pig. Meatball sirloin burgdoggen tail t-bone.</p> <p>Ham jerky bacon ground round, pork tongue fatback landjaeger short loin flank brisket ribeye cow. Jowl capicola flank shoulder strip steak spare ribs pig boudin. Burgdoggen beef ribs kevin meatball frankfurter turkey pork loin ground round capicola shoulder ribeye t-bone cow prosciutto boudin. Porchetta rump bacon swine, hamburger ham hock beef ribs picanha turkey leberkas. Venison pork ham, biltong bacon prosciutto spare ribs pig picanha capicola. Pastrami pancetta bresaola chuck biltong venison. Leberkas chicken pastrami shoulder, turducken drumstick spare ribs picanha capicola pancetta rump salami tail t-bone.</p> <p>Picanha doner burgdoggen sausage. Corned beef pork belly alcatra, ground round beef ribs tenderloin ball tip pork loin pig hamburger pork chop tri-tip brisket. Jowl doner tail shankle venison frankfurter. Spare ribs pig chicken t-bone. Beef sirloin tongue picanha pork capicola fatback, meatball boudin porchetta shank tri-tip pork belly.</p> <img class="right" src="https://placehold.it/400x300" /> <p>Leberkas chicken short loin kevin tri-tip kielbasa ham hock meatball, ball tip ground round tongue filet mignon. Venison tongue pork belly pig. Kielbasa short ribs sirloin venison alcatra hamburger bacon boudin. Pork ball tip brisket strip steak pig, pork loin turkey jowl kevin spare ribs tenderloin. Landjaeger sirloin spare ribs ribeye ball tip, venison shank bresaola chicken pork loin doner shoulder jowl shankle pastrami. Shoulder tri-tip pork loin swine, leberkas salami ground round bresaola pastrami kielbasa chuck chicken.</p> <p>Pancetta tail sirloin corned beef frankfurter burgdoggen kielbasa leberkas chicken chuck meatball pork belly flank venison. Porchetta shankle capicola, strip steak biltong alcatra pastrami. Frankfurter shankle drumstick tail, pancetta pork belly andouille. Ball tip pancetta strip steak venison pork loin hamburger. Drumstick landjaeger cupim, ham hock boudin beef kielbasa pancetta pig.</p> </div> 

需要注意的是，如果您使用CMS输入此内容，并最终创建了一个包含两个仅包含三个段落元素的图像的文章，那么输出将看起来很糟糕。 或者，如果在最后一个图像之后有两个非常长或非常短的段落元素，则它的行为将不会完全符合预期。