Как выровнять изображение в конце первой строки абзаца?

Question

У меня есть следующий HTML код, который очень прост, просто изображение внутри абзаца.

  <p> 
    <img src="https://www.w3schools.com/css/pineapple.jpg" />
      Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  
  </p>

И это выглядит так:

И я хочу, чтобы изображение «плавало» до конца первого абзаца, как показано ниже:

Единственный способ получить этот дизайн - вставить изображение в конце первой строки, но может ли это быть любой код CSS, который может это сделать?

Мое HTML решение не является универсальным. c и вы должны вручную поместить изображение внутри абзаца:

  <p> 
    Lorem ipsum dolor sit amet, consectetur
    <img src="https://www.w3schools.com/css/pineapple.jpg" />
       adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  
  </p>

Answer 1

Добавить css код ..

Css

p img {
  float: right;
}

<p>
  <img src="https://www.w3schools.com/css/pineapple.jpg" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates
  iusto, odit. Numquam, sunt, dicta.
</p>

Answer 2

Просто используйте атрибут выравнивания для элемента тега изображения,

Я думаю, это то, что вы хотите

<p> 
    <img  align="right" src="https://www.w3schools.com/css/pineapple.jpg" />
      Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  
 </p>

В соответствии с документом MDN атрибут выравнивания устарел, поэтому CSS будет лучшим способом для go:

img {
  float: right;
}

<p> 
    <img src="https://www.w3schools.com/css/pineapple.jpg" />
      Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta. Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  
 </p>

Обновление :

Решение в сочетании с ответами: Идея состоит в том, чтобы выровнять изображение вправо с устаревший атрибут "align":

HTML код:

<div>
    <p> 
     <img align="right" src="https://www.w3schools.com/css/pineapple.jpg" />
       Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Minus incidunt recusandae quae molestias corporis veniam repellat provident aliquam amet odio cupiditate animi rerum neque voluptates iusto, odit. Numquam, sunt, dicta.  
    </p>
</div>

CSS код:

img {
  height: 100px;
  width: 100px;
  margin-top: -85px /* this allows you to put the image upper */
}

div {
  margin-top: 100px; /* gives you space above to display the image */
}