如何将文本移动到图像的右侧？

Question

我的代码显示：

我希望它看起来像这样：

Html：

< 700px

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

＆＃13;

＆＃13;

.box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.left, .right {
  flex: 1;
}

.right img {
  width: 100%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>