如何將文字移動到圖片的右側？

Question

我的代碼顯示：

我希望它看起來像這樣：

HTML：

</div>
    <div class= "Row1">
      <h2>Looking for a Job?</h2> 
      <p> Applying to a job can be such a chore.&nbsp;&nbsp;But chore no more!&nbsp;&nbsp;Send me your resume regardless of state and I will do the leg work for you. <br>
        I have helped many people apply to jobs.&nbsp;&nbsp;I am not a paid for recruiter.&nbsp;&nbsp;I will look for your dream job regardless of industry, no kickbacks just your success!</p>
            <img src= "http://laura.finance/img/road.png">
</div>  

Answer 1

您只需少量修改即可使用代碼

HTML：

<div class= "Row1">
    <div class="left">
        <h2>Looking for a Job?</h2> 
        <p> 
            Applying to a job can be such a chore.&nbsp;&nbsp;But chore no more!&nbsp;&nbsp;Send me your resume regardless of state and I will do the leg work for you. <br>
            I have helped many people apply to jobs.&nbsp;&nbsp;I am not a paid for recruiter.&nbsp;&nbsp;I will look for your dream job regardless of industry, no kickbacks just your success!
        </p>
    </div>
    <div class="right">
        <img src= "http://laura.finance/img/road.png">  
    </div>
    <div class="clearfix"></div>   
</div><!-- End row -->

CSS：

.Row1{
  padding: 15px;
  background-color:red;

}
.right img{
    width: 100%;
}
.left{
  Float:left;
  Font-size: 30px;
  width: 70%;
}
.right{
    float: right;
    width: 30%;
}
.clearfix{
    clear: both;
}

Answer 2

您可以使用Flexbox

 .box { display: flex; flex-direction: row; align-items: center; } .left, .right { flex: 1; } .right img { width: 100%; } 

 <div class="box"> <div class="left"> <h2>This is title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione saepe, dolorum alias facere numquam sit explicabo rem hic mollitia. Quas suscipit odio est, temporibus error labore! Porro asperiores officiis dicta.</p> </div> <div class="right"> <img src="http://placehold.it/400x400"> </div> </div> 

Answer 3

您可以通過2個快速步驟來實現所需的布局：

1. 將<img>移到div.Row1的開頭
2. 應用float: right; 和padding-left: 20px; 到<img>

看到：

 .Row1 > img { float: right; padding-left: 20px; width: 200px; } 

 <div class="Row1"> <img src="http://laura.finance/img/road.png" alt="A remote track through fields" /> <h2>Looking for a Job?</h2> <p> Applying to a job can be such a chore. But chore no more! Send me your resume regardless of state and I will do the leg work for you.</p> <p>I have helped many people apply to jobs. I am not a paid for recruiter. I will look for your dream job regardless of industry, no kickbacks just your success!</p> </div>