如果图像位于 html 中的文本之后，是否可以浮动图像？

Question

如果图像位于 html 中的文本之前，则将图像向右浮动使文本环绕它很容易。 但是如果图像在文本之后可以做到吗？ 像这样：

<div class="text">Lorem ipsum</div>
<img src='...' alt=''>

See JsFiddle - 在我无法更改 html 的情况下，如何将图像浮动到文本的右侧？

Answer 1

但是如果图片在文字之后可以做到吗？

不，这是不可能的。 float 指定内容跟随您应用它的元素的行为方式。

如果您只想要右侧的图像，左侧的文本（没有实际浮动图像周围的文本，这意味着只要有空间就在图像下方），然后使用flexbox。

Answer 2

在您的 HTML 结构中，您可以将 display flex 属性添加到您的类.not-working。

.not-working {
  display: flex;
}
img {  
  float: right;
  height: 150px;
}

hr {
  clear: both;
}

<div class="not-working">
  <div class="text"><strong>How can this image be right aligned with the text like below?</strong> Bacon ipsum dolor amet jerky buffalo flank short loin, porchetta shoulder ham meatball sausage venison pork. Beef ribs short ribs frankfurter flank kielbasa pastrami burgdoggen sirloin alcatra chislic. Fatback ham short ribs doner, ham hock pork belly pig tongue spare ribs. Beef ribs strip steak drumstick beef porchetta. Cupim tenderloin pork chop, beef buffalo ham sirloin prosciutto jowl alcatra. Chuck biltong pancetta, landjaeger cow drumstick corned beef alcatra pork sirloin ribeye turkey pork chop cupim. Pastrami cow sausage jerky andouille fatback. Venison biltong picanha turkey, salami spare ribs buffalo porchetta leberkas sausage. Pork ball tip andouille doner burgdoggen hamburger cow sirloin meatball leberkas. Ground round prosciutto chislic turkey biltong rump strip steak fatback chicken bacon shank. Rump fatback venison jowl spare ribs.</div>
  <img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>

<hr>

<div class="working">
  <img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
  <div class="text">Bacon ipsum dolor amet jerky buffalo flank short loin, porchetta shoulder ham meatball sausage venison pork. Beef ribs short ribs frankfurter flank kielbasa pastrami burgdoggen sirloin alcatra chislic. Fatback ham short ribs doner, ham hock pork belly pig tongue spare ribs. Beef ribs strip steak drumstick beef porchetta. Cupim tenderloin pork chop, beef buffalo ham sirloin prosciutto jowl alcatra.
    Chuck biltong pancetta, landjaeger cow drumstick corned beef alcatra pork sirloin ribeye turkey pork chop cupim. Pastrami cow sausage jerky andouille fatback. Venison biltong picanha turkey, salami spare ribs buffalo porchetta leberkas sausage. Pork ball tip andouille doner burgdoggen hamburger cow sirloin meatball leberkas. Ground round prosciutto chislic turkey biltong rump strip steak fatback chicken bacon shank. Rump fatback venison jowl spare ribs.</div>
</div>

Answer 3

通过一些技巧，如果图像大小已知，您就可以做到：

.box {
  overflow: auto;
  position: relative;
  border: 1px solid;
}

/* a fake float element */
.text:before {
  content: "";
  float: right;
  height: 150px; /* height of the image */
  aspect-ratio: 3/2; /* ratio of the image*/
}
/**/
/* the image on the top of the fake float element */
img {
  position: absolute;
  top: 0;
  right: 0;
  height: 150px;
}

<div class="box">
  <div class="text"><strong>How can this image be right aligned with the text like below?</strong> Bacon ipsum dolor amet jerky buffalo flank short loin, porchetta shoulder ham meatball sausage venison pork. Beef ribs short ribs frankfurter flank kielbasa pastrami burgdoggen sirloin alcatra chislic. Fatback ham short ribs doner, ham hock pork belly pig tongue spare ribs. Beef ribs strip steak drumstick beef porchetta. Cupim tenderloin pork chop, beef buffalo ham sirloin prosciutto jowl alcatra. Chuck biltong pancetta, landjaeger cow drumstick corned beef alcatra pork sirloin ribeye turkey pork chop cupim. Pastrami cow sausage jerky andouille fatback. Venison biltong picanha turkey, salami spare ribs buffalo porchetta leberkas sausage. Pork ball tip andouille doner burgdoggen hamburger cow sirloin meatball leberkas. Ground round prosciutto chislic turkey biltong rump strip steak fatback chicken bacon shank. Rump fatback venison jowl spare ribs.</div>
  <img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>


<div class="box">
  <img src='https://images.unsplash.com/photo-1613535449480-bb56b88d1886?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzgwNzU4MA&ixlib=rb-1.2.1&q=80&w=400' alt=''>
  <div class="text">Bacon ipsum dolor amet jerky buffalo flank short loin, porchetta shoulder ham meatball sausage venison pork. Beef ribs short ribs frankfurter flank kielbasa pastrami burgdoggen sirloin alcatra chislic. Fatback ham short ribs doner, ham hock pork belly pig tongue spare ribs. Beef ribs strip steak drumstick beef porchetta. Cupim tenderloin pork chop, beef buffalo ham sirloin prosciutto jowl alcatra.
    Chuck biltong pancetta, landjaeger cow drumstick corned beef alcatra pork sirloin ribeye turkey pork chop cupim. Pastrami cow sausage jerky andouille fatback. Venison biltong picanha turkey, salami spare ribs buffalo porchetta leberkas sausage. Pork ball tip andouille doner burgdoggen hamburger cow sirloin meatball leberkas. Ground round prosciutto chislic turkey biltong rump strip steak fatback chicken bacon shank. Rump fatback venison jowl spare ribs.</div>
</div>