!Solved!

I am currently programming a website with many images and HR lines. Unfortunately, some float images with little text besides them end up not being on top of the HR line.

p {
  font-family: serif;
  text-indent: 100px;
  text-align: justify;
}

img {
  width: 200px;
  float: right;
  padding: 15px;
  max-width: 25%;
}

<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/255px-Flag_of_Italy.svg.png" alt="italy flag">
<h2>Lorem Ipsum</h2>
<p>Dolor Sit Amet</p>
<hr>

CodePudding user response：

I believe floats take the element out of the dom flow. use inline-block on the image and adjust the left margin

p {
  font-family: serif;
  text-indent: 100px;
  text-align: justify;
}

img {
  width: 200px;
  display:inline-block;
  margin-left:max(calc(100vw - 200px - 30px - 3px),calc(75vw - 45px));  
  padding: 15px;
  max-width: 25%;
  border:solid 1px red;
}

div{
border:solid 1px green;}

body,html{
margin:0;
padding:0;
}

<div><img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/255px-Flag_of_Italy.svg.png" alt="italy flag">
<h2>Lorem Ipsum</h2>
<p>Dolor Sit Amet</p>
<hr>
</div>

CodePudding user response：

wrap the img tag with div and use flex

p {
  font-family: serif;
  text-indent: 100px;
  text-align: justify;
}

img {
  width: 200px; 
  padding: 15px;
  max-width: 25%;
  border: solid 1px red;
}

div {
display:flex;
justify-content:flex-end;
  border: solid 1px green;
}

<div id='container'>
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/255px-Flag_of_Italy.svg.png" alt="italy flag">
</div>  
  <h2>Lorem Ipsum</h2>
  <p>Dolor Sit Amet</p>
  <hr>